# react-easy-crop A React component to crop images/videos with easy interactions [![version][version-badge]][package] ![brotli size][brotli-badge] [![All Contributors](https://img.shields.io/badge/all_contributors-35-green.svg?style=flat-square)](#contributors) [![Build Status][build-badge]][build-page] [![Test Status][test-badge]][test-action] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs] [![Auto Release](https://img.shields.io/badge/release-auto.svg?colorA=888888&colorB=9B065A&label=auto)](https://github.com/intuit/auto)

Demo GIF

[![react-easy-crop npminsights](https://npminsights.vercel.app/api/package/readme-image/react-easy-crop?v=2023-02-22)](https://npminsights.vercel.app/package/react-easy-crop) ## Demo Check out the examples: - [Basic example with hooks](https://codesandbox.io/s/v69ly910ql) - [Basic example with class](https://codesandbox.io/s/q80jom5ql6) - [Basic example in Typescript](https://codesandbox.io/s/react-easy-crop-in-ts-lj1if) - [Example with output of the cropped image](https://codesandbox.io/s/q8q1mnr01w) - [Example with live output](https://codesandbox.io/s/react-easy-crop-with-live-output-kkqj0) - [Example with server-side cropping using sharp](https://codesandbox.io/s/react-easy-crop-with-sharp-psj5h) - [Example with image selected by the user (+ auto-rotation for phone pictures)](https://codesandbox.io/s/y09komm059) - [Example with round crop area and no grid](https://codesandbox.io/s/53w20p2o3n) - [Example without restricted position](https://codesandbox.io/s/1rmqky233q) - [Example with crop saved/loaded to/from local storage](https://codesandbox.io/s/pmj19vp2yx) - [Example with a video](https://codesandbox.io/s/react-easy-crop-for-videos-lfhme) - [Example within scrollable content](https://codesandbox.io/s/react-easy-crop-scroll-demo-fp21qd) ## Features - Supports drag, zoom and rotate interactions - Provides crop dimensions as pixels and percentages - Supports any images format (JPEG, PNG, even GIF) as url or base 64 string - Supports any videos format supported in HTML5 - Mobile friendly **If react-easy-crop doesn't cover your needs we recommend taking a look at [Pintura](https://pqina.nl/pintura/?ref=reacteasycrop)** Pintura features cropping, rotating, flipping, filtering, annotating, and lots of additional functionality to cover all your image and video editing needs on both mobile and desktop devices. **[Learn more about Pintura](https://pqina.nl/pintura/?ref=reacteasycrop)** ## Video tutorials from the community - [Create an image gallery with live cropping](https://www.youtube.com/watch?v=E_AHkWHhUz4) By [Coding With Adam](https://youtube.com/c/codingwithadam) - [Crop an avatar and download the result](https://www.youtube.com/watch?v=RmiP1AY5HFM) By [Manish Boro](https://www.youtube.com/channel/UCyq81Ac-Ir4WIhFUgb_kyRw) ## Installation ```shell yarn add react-easy-crop ``` or ```shell npm install react-easy-crop --save ``` ## Basic usage > The Cropper is styled with `position: absolute` to take the full space of its parent. > Thus, you need to wrap it with an element that uses `position: relative` or the Cropper will fill the whole page. ```js import { useState, useCallback } from 'react' import Cropper from 'react-easy-crop' const Demo = () => { const [crop, setCrop] = useState({ x: 0, y: 0 }) const [zoom, setZoom] = useState(1) const onCropComplete = (croppedArea, croppedAreaPixels) => { console.log(croppedArea, croppedAreaPixels) } return ( ) } ``` ## Styles This component requires some styles to be available in the document. By default, you don't need to do anything, the component will automatically inject the required styles in the document head. If you want to disable this behaviour and manually inject the CSS, you can set the `disableAutomaticStylesInjection` prop to `true` and use the file available in the package: `react-easy-crop/react-easy-crop.css`. ## Known issues ### The cropper size isn't correct when displayed in a modal If you are using the Cropper inside a modal, you should ensure that there is no opening animation that is changing the modal dimensions (scaling effect). Fading or sliding animations are fine. See [#428](https://github.com/ValentinH/react-easy-crop/issues/428), [#409](https://github.com/ValentinH/react-easy-crop/issues/409), [#267](https://github.com/ValentinH/react-easy-crop/issues/267) or [#400](https://github.com/ValentinH/react-easy-crop/issues/400) for more details. ## Props | Prop | Type | Required | Description | | :------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- | :------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `image` | string | | The image to be cropped. `image` or `video` is required. | | `video` | string or `Array<{ src: string; type?: string }>` | | The video to be cropped. `image` or `video` is required. | | `crop` | `{ x: number, y: number }` | ✓ | Position of the media. `{ x: 0, y: 0 }` will center the media under the cropper. | | `zoom` | number | | Zoom of the media between `minZoom` and `maxZoom`. Defaults to 1. | | `rotation` | number (in degrees) | | Rotation of the media. Defaults to 0. | | `aspect` | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3` | | `minZoom` | number | | Minimum zoom of the media. Defaults to 1. | | `maxZoom` | number | | Maximum zoom of the media. Defaults to 3. | | `zoomWithScroll` | boolean | | Enable zoom by scrolling. Defaults to `true` | | `cropShape` | 'rect' \| 'round' | | Shape of the crop area. Defaults to 'rect'. | | `cropSize` | `{ width: number, height: number }` | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. **You should probably not use this option and should rely on aspect instead. See https://github.com/ValentinH/react-easy-crop/issues/186.** | | `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. | | `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defaults to 1. | | `objectFit` [demo](https://codesandbox.io/s/react-easy-crop-forked-p9r34) | 'contain', 'cover', 'horizontal-cover' or 'vertical-cover' | | Specifies how the image is shown in the cropper. `contain`: the image will be adjusted to be fully visible, `horizontal-cover`: the image will horizontally fill the cropper, `vertical-cover`: the image will vertically fill the cropper, `cover`: we automatically pick between `horizontal-cover` or `vertical-cover` to have a fully visible image inside the cropper area. Defaults to "contain". | | `onCropChange` | crop => void | ✓ | Called every time the crop is changed. Use it to update your `crop` state. | | `onZoomChange` | zoom => void | | Called every time the zoom is changed. Use it to update your `zoom` state. | | `onRotationChange` | rotation => void | | Called every time the rotation is changed (with mobile or multi-fingers gestures). Use it to update your `rotation` state. | | `onCropSizeChange` | cropSize => void | | Called when a change in either the cropSize width or the cropSize height occurs. | | [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels (rounded to the nearest integer) | | [`onCropAreaChange`](#onCropAreaChangeProp) | Function | | Very similar to [`onCropComplete`](#onCropCompleteProp) but is triggered for every user interaction instead of waiting for the user to stop. | | `transform` | string | | CSS transform to apply to the image in the editor. Defaults to `translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom})` with variables being pulled from props. | | `style` | `{ containerStyle: object, mediaStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. | | `classes` | `{ containerClassName: string, mediaClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. If you have CSS specificity issues, you should probably use the `disableAutomaticStylesInjection` prop. | | `mediaProps` | object | | The properties you want to apply to the media tag ( or

_{Valentin Hervieu} 💬 🐛 💻 📖 💡 🚇 👀 ⚠️ 🔧	_{Juntae Kim} 💻	_tafelito 💻	_Nicklas 💻	_{Kyle Poole} 💻	_{Nathaniel Bibler} 💻	_{TheRealSlapshot} 💻
_{Claudiu Andrei} 💻	_MattyBalaam 💻	_{Christian Kehr} 📖	_{Christopher Albanese} 💻	_{Benjamin Piouffle} 💻	_mbalaam 📖	_{Edouard Short} 💻 🤔
_{All Contributors} 🔧	_FillPower1 💻	_{Nihey Takizawa} 📖	_{Alex Lende} 🚧	_{Stefano Ruth} 💻 🤔	_{David Vail} 💻	_ersefuril 💻
_Michal-Sh 💻	_{Ivan Galiatin} 💻 💡	_Raed 🚇 📖	_cvolant 💻	_{CodingWith-Adam} 📖	_LiveBoom 💻	_{Mateusz Juszczyk} 💻
_{Darren Labithiotis} 💻	_Oleksii 📖	_{Vass Bence} 📖 💻	_{Anthony Utt} 📖 💻	_{Sean Parmelee} 📖 💻	_{Glen Davies} 💻	_carlosdi0 📖
_{Hüseyin Büyükdere} 📖	_{Pontus Magnusson} 💻	_kruchkou 💻	_Rik 📖	_{Abdullah Alaqeel} 💻	_{Thomas Johansen} 💻

react-easy-crop

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past