/image-editor

Image Editor made in React and TypeScript

Primary LanguageTypeScript

Image Editor

Image editor made in React and TypeScript.

example (2)

Install

npm install @gchumillas/image-editor

Usage

// 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.

Clone and run the example

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