React component

A new version of the jSuites JavaScript Cropper plugin is available here.

JavaScript Image Cropper

• JavaScript Cropper

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