Image editor made in React and TypeScript.
npm install @gchumillas/image-editor
// You can access the different methods of ImageEditor through its reference:
//
// - loadImageFromFile: loads an image from file
// - getCroppedImage: gets the cropped image
//
const imageEditorRef = useRef<ImageEditorType>(null)
// For example:
//
// const imageEditor = imageEditorRef.current!
// imageEditor.loadImageFromFile(...)
// imageEditor.getCroppedImage()
<ImageEditor
ref={imageEditorRef}
width={width}
height={height}
cropWidth={cropWidth}
cropHeight={cropHeight}
scale={scale / 100}
bgColor={bgColor}
onLoadImage={setImage}
>
See a complete example HERE.
Simply download the repo and start Storybook:
# clone the project and install libraries
clone https://github.com/gchumillas/image-editor
cd image-editor
npm install
# run the example
npm run storybook