Nothing's plumb meaningless
    Have ideas to improve npm?Join in the discussion! »

    cropperjs-react

    1.5.2 • Public • Published

    cropperjs-react

    CircleCI Downloads Version

    NPM

    React component wrapper for CropperJS using react hooks

    Table of Contents

    Overview

    React component wrapping CropperJS library using React hooks (useEffect and useState).

    This wrapper accommodates all the functionality of the CropperJS library.

    To get data back from the cropper once the cropper object has initialized, update the getter object, e.g.:

    setGetter({ action: 'getCanvasData', func: setCanvasData });

    The cropper data, in this case the canvas data, will be passed into the supplied function as an argument. In this example, the canvas data will passed into setCanvasData and set into the canvasData state.

    To set data in the cropper object use the setter object, e.g.:

    setSetter({ action: 'setData', data: { width: 300, height: 600 } });

    This example will update the width and height of the crop box to be 300px by 600px.

    Getting Started

    npm install cropperjs-react

    Usage

    import React, { useEffect, useState } from 'react';
    import CropperJSWrapper from 'cropperjs-react';
     
    const CropperJSWrapperExample = () => {
      const [containerData, setContainerData] = useState(null);
      const [canvasData, setCanvasData] = useState(null);
      const [croppedData, setCroppedData] = useState(defaultCroppedData);
     
      const [getter, setGetter] = useState({ action: '', func: () => {} });
      const [setter, setSetter] = useState({ action: '', data: {} });
     
      const imageUrl = 'https://cdn.thisiswhyimbroke.com/images/creepy-horse-head-squirrel-feeder2.jpg';
     
      const onCrop = (cropEvent) => {
        setGetter({ action: 'getCanvasData', func: updateCanvasData });
        setCroppedData(cropEvent.detail);
      };
     
      const initializeCropper = () => {
        setGetter({ action: 'getCanvasData', func: setCanvasData });
        setGetter({ action: 'getContainerData', func: setContainerData });
        setGetter({ action: 'getData', func: setCroppedData });
      };
     
      const onZoom = () => {
        setGetter({ action: 'getCanvasData', func: setCanvasData });
      };
     
      return (
        <CropperJSWrapper
          imageUrl={imageUrl} // required
          onCrop={onCrop} // required
          onReady={initializeCropper}
          onZoom={onZoom}
          getter={getter}
          setter={setter}
        />
      )
    }

    Install

    npm i cropperjs-react

    DownloadsWeekly Downloads

    58

    Version

    1.5.2

    License

    ISC

    Unpacked Size

    182 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar