A responsive image cropping tool for React
npm install react-image-cropAn image cropping tool for React with no dependencies.

1. Features
2. Installation
3. Usage
4. Example
5. CDN
6. Props
7. FAQ
1. How can I generate a crop preview in the browser?
2. How to correct image EXIF orientation/rotation?
3. How to filter, rotate and annotate?
4. How can I center the crop?
8. Contributing / Developing
- Responsive (you can use pixels or percentages).
- Touch enabled.
- Free-form or fixed aspect crops.
- Fully keyboard accessible (a11y).
- No dependencies/small footprint (<5KB gzip).
- Min/max crop size.
- Crop anything, not just images.
If React Crop doesn't cover your requirements then take a look at Pintura (our sponsor). It features cropping, rotating, filtering, annotation, and lots more.
```
npm i react-image-crop --save
yarn add react-image-crop
pnpm add react-image-crop
This library works with all modern browsers. It does not work with IE.
Include the main js module:
`js`
import ReactCrop from 'react-image-crop'
Include either dist/ReactCrop.css or ReactCrop.scss.
`js`
import 'react-image-crop/dist/ReactCrop.css'
// or scss:
import 'react-image-crop/src/ReactCrop.scss'
`tsx
import ReactCrop, { type Crop } from 'react-image-crop'
function CropDemo({ src }) {
const [crop, setCrop] = useState
return (
)
}
`
See the sandbox demo for a more complete example.
`html`
Note when importing the script globally using a