Nonchalantly Perusing Magazines
    Wondering what’s next for npm?Check out our public roadmap! »

    react-cropper
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.7 • Public • Published

    react-cropper

    Cropperjs as React component

    NPM NPM NPM downloads Dependencies Language grade: JavaScript Total alerts Bundle Size minZip Bundle Size min License codecov

    Demo

    Click for a Demo

    Docs

    Installation

    Install via npm

    npm install --save react-cropper

    You need cropper.css in your project which is from cropperjs. Since this project have dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later

    Breaking Change (version >= 2.0.0)

    1. Support for ref has been removed. Use the onInitialized method to get the cropper instance. Added back ref support in 2.1.0.
    2. To set initial aspect ratio, instead of using aspectRatio use initialAspectRatio.
    3. Props data, canvasData and cropBoxData are directly passed on to cropperjs and their respective setters are not called as earlier.
    4. React Cropper now does not try to use/execute moveTo as earlier. Directly use the moveTo method from the cropper instance.
    5. React Cropper does not depend on @types/react-cropper and provides its own types. Please uninstall/remove @types/react-cropper as they might 'cause issues.

    Quick Example

    import React, { useRef } from "react";
    import Cropper from "react-cropper";
    import "cropperjs/dist/cropper.css";
    
    const Demo: React.FC = () => {
      const cropperRef = useRef<HTMLImageElement>(null);
      const onCrop = () => {
        const imageElement: any = cropperRef?.current;
        const cropper: any = imageElement?.cropper;
        console.log(cropper.getCroppedCanvas().toDataURL());
      };
    
      return (
        <Cropper
          src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
          style={{ height: 400, width: "100%" }}
          // Cropper.js options
          initialAspectRatio={16 / 9}
          guides={false}
          crop={onCrop}
          ref={cropperRef}
        />
      );
    };

    Options

    src

    • Type: string
    • Default: null
    <Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />

    alt

    • Type: string
    • Default: picture

    crossOrigin

    • Type: string
    • Default: null

    dragMode

    https://github.com/fengyuanchen/cropperjs#dragmode

    scaleX

    https://github.com/fengyuanchen/cropperjs#scalexscalex

    scaleY

    https://github.com/fengyuanchen/cropperjs#scalexscaley

    enable

    https://github.com/fengyuanchen/cropperjs#enable

    disable

    https://github.com/fengyuanchen/cropperjs#disable

    zoomTo

    https://github.com/fengyuanchen/cropperjs#zoomto

    rotateTo

    https://github.com/fengyuanchen/cropperjs#rotateto

    Other options

    Accept all options in the docs as properties.

    Methods

    Use the cropper instance from onInitialized to access cropperjs methods

    Build

    npm run build

    Development

    npm start

    Author

    Fong Kuanghuei

    Maintainer

    Shubhendu Shekhar

    License

    MIT

    Install

    npm i react-cropper

    DownloadsWeekly Downloads

    68,369

    Version

    2.1.7

    License

    MIT

    Unpacked Size

    89.1 kB

    Total Files

    42

    Last publish

    Collaborators

    • avatar
    • avatar