ImageCropModal

Modal que integra react-easy-crop para proporcionar una experiencia de recorte de imágenes interactiva. El usuario puede arrastrar para reposicionar el área de recorte y hacer zoom. Al confirmar el recorte, se llama a onClose con la imagen recortada como una data URL base64 en formato JPEG. Al cancelar, se llama a onClose sin argumento.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (result?: string) => void | Sí | — | Se llama cuando el modal se cierra. Recibe la imagen recortada como data URL base64 al confirmar, o undefined al cancelar. | | image | string | Sí | — | La imagen fuente como string base64 o URL de objeto. | | title | string | No | — | Título opcional (actualmente no se renderiza en la UI). | | subtitle | string | No | — | Subtítulo opcional (actualmente no se renderiza en la UI). | | aspectRatio | number | No | 1 | Relación de aspecto del recorte. Usar 1 para cuadrado, 16/9 para pantalla ancha, etc. | | backdropStyle | React.CSSProperties | No | — | Estilos en línea para el backdrop del modal. | | windowStyle | React.CSSProperties | No | — | Estilos en línea fusionados en la ventana del modal. | | closeButtonStyle | React.CSSProperties | No | — | Estilos para el botón de cierre. | | closeIcon | string | No | — | Nombre del ícono del botón de cierre. | | closeIconPaths | any[] | No | — | Rutas de ícono personalizadas para el botón de cierre. | | closeIconSize | number | No | — | Tamaño del ícono del botón de cierre. | | zIndex | number | No | 99999 | z-index CSS del overlay del modal. | | id | string | No | — | id HTML del elemento modal. | | fullScreen | boolean | No | true | Cuando es true, el modal ocupa toda la pantalla. |

Uso

Básico

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);
        }}
      />
    </>
  );
}