React component

Installation

npm i --save @jsuites/react-cropper

Example

import React, { useState } from "react";
import Cropper from "@jsuites/react-cropper";

export default function App() {
  const [url, setUrl] = useState("");

  return <Cropper imageUrl={url} setImage={setUrl} />;
}

Note: It is necessary to maintain a link in index.html or some other method to use material design icons, such as the following link:

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Properties

Properties	Description
imageUrl: string	Initial default image URL
setImageUrl: function(string)	Update the image from a URL. CORS must be considered.
area: [number, number]	Initial size of the component.
crop: [number, number]	Initial size of the cropper handler. NOTE: On small devices, this is not used.
remoteParser: string	URL of a remote backend image parser to workaround CORS limitations.
allowResize: boolean	Defines whether the size of the image cropping element can be reset by the user.
text: object	{ extensionNotAllowed:'', imageTooSmall:'' }
onload: function(element: DOMElement) => void	Function performed as soon as the component is loaded.
onchange: function(element: DOMElement , image: DOMElement)	Function performed when the image is changed.