cropperjs-react
React component wrapper for CropperJS using react hooks
Table of Contents
Overview
React component wrapping CropperJS library using React hooks (useEffect and useState).
This wrapper accommodates all the functionality of the CropperJS library.
To get data back from the cropper once the cropper object has initialized, update the getter
object, e.g.:
;
The cropper data, in this case the canvas data, will be passed into the supplied function as an argument. In this example, the canvas data will passed into setCanvasData
and set into the canvasData
state.
To set data in the cropper object use the setter
object, e.g.:
;
This example will update the width and height of the crop box to be 300px by 600px.
Getting Started
npm install cropperjs-react
Usage
;; const CropperJSWrapperExample = { const containerData setContainerData = ; const canvasData setCanvasData = ; const croppedData setCroppedData = ; const getter setGetter = ; const setter setSetter = ; const imageUrl = 'https://cdn.thisiswhyimbroke.com/images/creepy-horse-head-squirrel-feeder2.jpg'; const onCrop = { ; ; }; const initializeCropper = { ; ; ; }; const onZoom = { ; }; return <CropperJSWrapper imageUrl=imageUrl // required onCrop=onCrop // required onReady=initializeCropper onZoom=onZoom getter=getter setter=setter /> }