recrop-element
React bindings for image-crop-element.
Installation
npm install recrop-element
# or yarn
yarn add recrop-element
# or pnpm
pnpm add recrop-element
Usage
Plain
import ReImageCrop from 'recrop-element'
<ReImageCrop src='./your-img.jpg' />
Rounded crop area
import ReImageCrop from 'recrop-element'
<ReImageCrop src='./your-img.jpg' rounded />
With loading state
import ReImageCrop from 'recrop-element'
<ReImageCrop src='./your-img.jpg'
loadingImage='./your-loading-img.jpg'
/>
With autoupdate inputs
import ReImageCrop from 'recrop-element'
<ReImageCrop src='./your-img.jpg'
displayX
displayY
displayWidth
displayHeight
/>
Listen to the change event
import ReImageCrop from 'recrop-element'
<ReImageCrop src='./your-img.jpg'
onImageChange={(event) => {
console.log(
'Crop area changed.',
event.detail.x,
event.detail.y,
event.detail.width,
event.detail.height
)
}}
/>