Simple React image cropper with cropper.js
MIT License
This is the tiny and simple image cropper & resizer based on Cropper.js. Simply it is wrapped to React Component to allow to use more easily in React project.
There are many functions of Cropper.js but this module is simplified with main features in purpose of avatar image crop & resize in most user-profile web page.
$ npm i simple-react-cropper
# or
$ yarn add simple-react-cropper
import React from "react";
import ReactDOM from "react-dom";
import Cropper from "simple-react-cropper";
const uploadToServer = blob => {
console.log(blob);
};
const afterCrop = () => {
console.log("close cropper");
};
const Root = () => (
<div className="container-demo">
<Cropper
aspectRatio={4 / 4}
width={500}
height={500}
upload={uploadToServer}
afterCrop={afterCrop}
containerStyle={{ maxHeight: "80vh", borderRadius: "10px" }}
/>
</div>
);
ReactDOM.render(<Root />, document.getElementById("root"));
Props | Type | required | Default | Descriptioin |
---|---|---|---|---|
aspectRatio | number | true | NaN | Define the fixed crop box ratio. By default, the crop box has free ratio |
width | number | false | 500 | The width of output image |
height | number | false | 500 | The height of output image |
upload | function | true | undefined | The function to handle the output (blob type) |
afterCrop | function | false | undefined | The function to be called after confirming cropping |
fillColor | string | false | "#FFF" | The color to be filled in blank area after crop |
containerStyle | React.CSSProperties | false | undefined | The object to style the parent container |