React Image Crop

An image cropping tool for React with no dependencies.


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

Learn more about Pintura here

Installation

``
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.

Usage

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'
`

Example

`tsx
import ReactCrop, { type Crop } from 'react-image-crop'

function CropDemo({ src }) {
const [crop, setCrop] = useState()
return (
setCrop(c)}>


)
}
`

See the sandbox demo for a more complete example.

CDN

`html


`

Note when importing the script globally using a