Nested Public Modules

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

    1.2.5 • Public • Published

    react-cropper-custom

    A React component to crop images with interactions.

    cropper

    language

    Korean

    Demo

    Check out the examples:

    Features

    • Supports drag, zoom interactions.
    • The image is automatically enlarged to fit the crop area.

    Installation

    yarn add react-cropper-custom
    

    or

    npm install react-cropper-custom --save

    Basic usage

    import { Cropper } from 'react-cropper-custom';
    import "react-cropper-custom/dist/index.css";
    
    const Demo = () => {
      const [zoom, setZoom] = useState(1);
    
      const onCropComplete = (croppedArea) => {
        console.log(croppedArea);
      };
    
      return (
        <Cropper
          src={yourImage}
          width={WIDTH}
          height={HEIGHT}
          zoom={zoom}
          onZoomChange={setZoom}
          onCropComplete={onCropComplete}
        />
      );
    };

    Props

    Prop Type Required Description
    src string The image to be cropped. src is required.
    width number Size of the crop area (in pixels). Defaults to 0. If the width and height values are 0, the crop area is responsive. It also follows the proportions of aspect props.
    height number Size of the crop area (in pixels). Defaults to 0. If the width and height values are 0, the crop area is responsive. It also follows the proportions of aspect props.
    aspect number Aspect of the crop area (height / width). Defaults to 1.
    zoom number Zoom of the media between minZoom and maxZoom. Defaults to 1.
    minZoom number Minimum zoom of the media. Defaults to 1.
    maxZoom number Maximum zoom of the media. Defaults to 3.
    onZoomChange zoom => void Called everytime the zoom is changed. Use it to update your zoom state.
    initialCroppedArea {x: number, y: number, width: number, height: number} Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedArea passed to onCropComplete.
    onCropComplete Function Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in pixels and image.

    onCropComplete(croppedArea)

    This callback is the one you should use to save the cropped area of the media. It's passed 1 arguments:

    1. croppedArea: coordinates and dimensions of the cropped area in percentage of the media dimension.

    croppedArea argument have the following shape:

    const croppedArea = {
      x: number, // x/y are the coordinates of the top/left corner of the cropped area
      y: number,
      width: number, // width of the cropped area
      height: number, // height of the cropped area
    };

    Examples

    responsive cropper

    import { Cropper, getCroppedImg } from 'react-cropper-custom';
    import "react-cropper-custom/dist/index.css";
    
    const Demo = () => {
      const [img, setImg] = useState(yourImage);
      const [aspect, setAspect] = useState(1);
    
      const onCropComplete = async (croppedArea) => {
        try {
          const image = await getCroppedImg(yourImage, croppedArea, { width: 1200, height: 1200 * aspect });
          setImg(image);
        } catch (e) {
          console.error(e);
        }
      };
    
      return (
        <div className="wrapper">
          <Cropper
            src={yourImage}
            aspect={aspect}
            onCropComplete={onCropComplete}
          />
        <div>
      );
    };
    .wrapper {
      width: 100%;
      max-width: 540px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    License

    MIT

    Maintainers

    This project is maintained by catca.

    Install

    npm i react-cropper-custom

    DownloadsWeekly Downloads

    129

    Version

    1.2.5

    License

    MIT

    Unpacked Size

    19.3 MB

    Total Files

    25

    Last publish

    Collaborators

    • catca