# React Image Crop An image cropping tool for React with no dependencies. [![React Image Crop on NPM](https://img.shields.io/npm/v/react-image-crop.svg)](https://www.npmjs.com/package/react-image-crop) [CodeSandbox Demo](https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o) ![ReactCrop GIF](https://raw.githubusercontent.com/sekoyo/react-image-crop/master/crop-demo.gif) ## Table of Contents 1. [Features](#features) 2. [Installation](#installation) 3. [Usage](#usage) 4. [Example](#example) 5. [CDN](#cdn) 6. [Props](#props) 7. [FAQ](#faq) 1. [How can I generate a crop preview in the browser?](#how-can-i-generate-a-crop-preview-in-the-browser) 2. [How to correct image EXIF orientation/rotation?](#how-to-correct-image-exif-orientationrotation) 3. [How to filter, rotate and annotate?](#how-to-filter-rotate-and-annotate) 4. [How can I center the crop?](#how-can-i-center-the-crop) 8. [Contributing / Developing](#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](https://pqina.nl/pintura/?ref=react-image-crop) (our sponsor). It features cropping, rotating, filtering, annotation, and lots more. [Learn more about Pintura here](https://pqina.nl/pintura/?ref=react-image-crop) ## 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](https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o) for a more complete example. ## CDN ```html ``` Note when importing the script globally using a `

react-image-crop

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past