Star

React component

React cropper component working example

Installation

npm i --save @jsuites/react-cropper

Example

import { useState } from "react";

import Cropper from "@jsuites/react-cropper";

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

  return (
    <Cropper
      imageUrl={url}
      setImage={setUrl}
      options={{ allowResize: true }}
      style={{ height: "400px", width: "400px" }}
    />
  );
}

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 Current image URL.
setImageUrl: function(string) Method that updates the state of imageUrl. CORS must be considered.
options: Object Set of cropper options specified further on.
style: Object Style applied to the component.

Options

Properties Description
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: '' }