react-cropper

Cropperjs as React component


Demo

Click for a Demo

Docs

- Cropperjs

Installation

Install via npm

``shell
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

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

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

return (
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

$3

- Type: string
- Default: null

`js

`

$3

- Type: string
- Default: picture

$3

- Type: string
- Default: null

$3

https://github.com/fengyuanchen/cropperjs#dragmode

$3

https://github.com/fengyuanchen/cropperjs#scalexscalex

$3

https://github.com/fengyuanchen/cropperjs#scalexscaley

$3

https://github.com/fengyuanchen/cropperjs#enable

$3

https://github.com/fengyuanchen/cropperjs#disable

$3

https://github.com/fengyuanchen/cropperjs#zoomto

$3

https://github.com/fengyuanchen/cropperjs#rotateto

$3

Accept all options in the docs as properties.

Methods

Use the cropper instance from onInitialized to access cropperjs methods

Build

`sh
npm run build
`

Development

`sh
npm start
``

Author

Fong Kuanghuei

Maintainer

Shubhendu Shekhar

License

MIT