ImageCropModal

A modal that integrates react-easy-crop to provide an interactive image cropping experience. The user can drag to reposition the crop area and zoom in or out. Confirming the crop calls onClose with the cropped image as a base64 JPEG data URL. Cancelling calls onClose with no argument.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (result?: string) => void | Yes | — | Called when the modal closes. Receives the cropped image as a base64 data URL when confirmed, or undefined when cancelled. | | image | string | Yes | — | The source image as a base64 string or object URL. | | title | string | No | — | Optional title (not currently rendered in the UI). | | subtitle | string | No | — | Optional subtitle (not currently rendered in the UI). | | aspectRatio | number | No | 1 | Crop aspect ratio. Use 1 for square, 16/9 for widescreen, etc. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | 99999 | CSS z-index of the modal overlay. | | id | string | No | — | HTML id for the modal element. | | fullScreen | boolean | No | true | When true, the modal occupies the full viewport. |

Usage

Basic

import React from 'react';
import ImageCropModal from '@/components/modals/ImageCropModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const [imageSource, setImageSource] = React.useState('');
  const [croppedImage, setCroppedImage] = React.useState('');

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setImageSource(URL.createObjectURL(file));
      setOpen(true);
    }
  };

  return (
    <>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <ImageCropModal
        isOpen={open}
        image={imageSource}
        aspectRatio={1}
        onClose={(result) => {
          if (result) setCroppedImage(result);
          setOpen(false);
        }}
      />
    </>
  );
}