react-cropper

Cropperjs as React component

Demo

Docs

Cropperjs

Installation

Install via npm

npm install --save 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/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later

Quick Example

import React, { useRef } from "react";
import Cropper, { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<ReactCropperElement>(null);
  const onCrop = () => {
    const cropper = cropperRef.current?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

Options

src

Type: string
Default: null

<Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />

alt

Type: string
Default: picture

crossOrigin

Type: string
Default: null

Other options

Accept all options in the docs as properties.

Methods

Use the cropper instance from onInitialized to access cropperjs methods

Build

npm run build

Development

npm start

Author

Fong Kuanghuei

Maintainer

Shubhendu Shekhar

License

MIT

Current Tags

2.3.0-0 ... beta (2 years ago)
2.3.3 ... latest (2 years ago)

react-cropper

Demo

Docs

Installation

Quick Example

Options

src

alt

crossOrigin

dragMode

scaleX

scaleY

enable

disable

zoomTo

rotateTo