React Image Crop

A responsive image cropping tool for React

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

README

React Image Crop


An image cropping tool for React with no dependencies.

React Image Crop on NPM

CodeSandbox Demo

ReactCrop GIF

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.

Installation


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

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. import ReactCrop, { type Crop } from 'react-image-crop'

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

See the sandbox demo for a more complete example.

CDN


  1. ```html
  2. <link href="https://unpkg.com/react-image-crop/dist/ReactCrop.css" rel="stylesheet" />
  3. <script src="https://unpkg.com/react-image-crop/dist/index.umd.cjs"></script>
  4. ```

Note when importing the script globally using a `