React Image Crop

A responsive image cropping tool for React

ReactImage processing
DominicTobias/react-image-cropreact-image-crop

README

This documentation refers to v10. Go to 9.1.1 tag for v9 docs.

React Image Crop


An image cropping tool for React with no dependencies.
React Image Crop on NPM

CodeSandbox Demo

ReactCrop GIF

Table of Contents


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

Features


- 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. It features cropping, rotating, filtering, annotation, and lots more.

Learn more about Pintura here

Installation


  1. ```
  2. npm i react-image-crop --save
  3. yarn add react-image-crop
  4. ```

This library works with all modern browsers. It does not work with IE.

Usage


Include the main js module:

  1. ``` js
  2. import ReactCrop from 'react-image-crop'
  3. ```

Include either dist/ReactCrop.css or ReactCrop.scss.

  1. ``` js
  2. import 'react-image-crop/dist/ReactCrop.css'
  3. // or scss:
  4. import 'react-image-crop/src/ReactCrop.scss'
  5. ```

Example


  1. ```tsx
  2. function CropDemo({ src }) {
  3.   const [crop, setCrop] = useState<Crop>()
  4.   return (
  5.     <ReactCrop crop={crop} onChange={c => setCrop(c)}>
  6.       <img src={src} />
  7.     </ReactCrop>
  8.   )
  9. }
  10. ```

See the sandbox demo for a more complete example.

CDN


  1. ``` html
  2. <script src="https://unpkg.com/react-image-crop/dist/ReactCrop.min.js"></script>
  3. ```

Note when importing the script globally using a `