@mindk/react-cropper

react-cropper

Cropperjs as React hook

Docs

• Image Cropper

Installation

Install via npm

npm install --save @mindk/react-cropper

You need cropper.css in your project which is from cropperjs. Since this project have dependency on cropperjs, it located in node_modules/cropperjs/dist/cropper.css.

Quick Example

import React from 'react';
import { useCropper } from '@mindk/react-cropper';

import 'cropperjs/dist/cropper.css';

function Demo({ image }) {
  const { cropperComponent } = useCropper({ image, onCrop: croppedImage => console.log(croppedImage) });

  return <div>{cropperComponent}</div>;
}

Options

image

• Type: file

Image file from input.

onCrop

• Type: function

options

• Type: object
• Default: {}

canvasOptions

• Type: object
• Default: {}

filename

• Type: string
• Default: undefined

Cropped image filename