React Multi Crop Image

An open source project by cc:Monet, an AI-powered bookkeeping platform that helps businesses automate their financial processes.

A React component that allows users to draw multiple crop regions on an image. Originally developed to handle document processing and receipt scanning features at cc:Monet, this component has been improved and open-sourced for broader use.

It was built and improved based on react-multi-crops.

It has latest support and more complete functionalities with improved performance

Installation

npm install react-multi-crop-image

or

yarn add react-multi-crop-image

Usage

// src/App.tsx
import React, { useState } from 'react';
import { MultiCrops } from 'react-multi-crop-image';

const App: React.FC = () => {
  const [croppedImages, setCroppedImages] = useState<string[]>([]);
  
  return (
    <div>
      <MultiCrops imageUrl={"YOUR_IMAGE_URL"} setCroppedImages={setCroppedImages} crossOrigin="anonymous" />
      <div>
        {croppedImages.map((image, index) => (
          <img key={index} src={image} alt={`Cropped ${index}`} />
        ))}
      </div>
    </div>
  );
};

export default App;

MultiCrops Component

The MultiCrops component allows users to create, manage, and export multiple cropped sections from a given image. It's highly customizable, enabling you to style the cropping areas, number icons, and delete icons to fit your application's design.

Props

| Prop | Type | Required | Description | | ------------------------- | ----------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | imageUrl | string | Yes | The URL of the image to be displayed and cropped. | | setCroppedImages | React.Dispatch<React.SetStateAction<string[]>> | Yes | A state setter function to store the data URLs of the cropped images. | | crossOrigin | "" \| "anonymous" \| "use-credentials" | Yes | Specifies the cross-origin behavior of the image. Use "" for no cross-origin, "anonymous" for CORS-enabled images without credentials, or "use-credentials" for CORS with credentials. | | cropStyle | React.CSSProperties | No | Custom styles to apply to each cropping area. Overrides the default crop styles. | | activeCropStyle | React.CSSProperties | No | Custom styles to apply to the currently selected/active cropping area. | | numberIconStyle | React.CSSProperties | No | Custom styles for the number icons displayed within each cropping area. | | deleteIconStyle | React.CSSProperties | No | Custom styles for the delete icons used to remove cropping areas. | | deleteIconContainerStyle| React.CSSProperties | No | Custom styles for the container wrapping the delete icons. |

Type Definitions

Coordinate Type

interface Coordinate {
  x: number;
  y: number;
  width: number;
  height: number;
  id: string;
}

CrossOrigin

Defines the cross-origin settings for the image.

type CrossOrigin = "" | "anonymous" | "use-credentials";

Point

Represents a point with x and y coordinates.

interface Point {
  x: number;
  y: number;
}

License

MIT

Changelog

[1.3.1] - 2025-10-22

• Add scrollable resizing

[1.3.0] - 2025-03-06

Improved

• Improve performance

[1.2.8] - 2025-02-21

Added

• Improve cropped image size

[1.2.6] - 2025-02-21

Added

• Add scrollable cropping
• Improve performance

[1.1.9] - 2025-02-12

Added

• expose coordinates to external coordinates handling

[1.1.8] - 2025-02-12

Added

• Add initial coordinates
• Add onCoordinatesChange callback

[1.1.7] - 2025-02-12

Fixed

• Fixed the issue where the crop area was not being properly handled when the container was scrollable

[1.1.6] - 2025-01-21

Added

• allow scrollable container
• change crosshair style

[1.1.5] - 2025-01-17

Fixed

• Higher resolution image

[1.1.4] - 2025-01-15

Added

• Readme with demo

[1.1.3] - 2025-01-14

Added

• lodash to improve performance
• new active and inactive management
• new active and inactive crop styles

[1.1.2] - 2024-11-14

Changed

• Better Readme
• Full code refactoring
• Smoother crop area resizing
• Remove unnecessary styles
• Fix delete icon

[1.0.7] - 2024-11-13

Added

• cropStyle, numberIconStyle, deleteIconStyle, deleteIconContainerStyle props

[1.0.5] - 2024-11-13

Added

• onCropComplete callback with base64 image data
• Better TypeScript type exports
• Additional prop validation

[Unreleased]

Planned

• Touch device support
• Rotation controls
• Aspect ratio constraints
• Custom styling options
• Zoom functionality

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.