recrop-element

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
                 )
             }}
/>