React component
React cropper component working example
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. |