ImageCropper

A lightweight, reusable React component for cropping images using an intuitive interface. Built with react-image-crop and styled using Tailwind CSS.

Features

• Easy to integrate into any React project
• Adjustable crop aspect ratio
• Custom dimension output
• Supports image preview and callback for final cropped image

Installation

npm install crop-image-react

Usage

import React, { useState } from 'react';
import ImageCropper from 'crop-image-react';

function App() {
  const [file, setFile] = useState<File | null>(null);
  const [showCropper, setShowCropper] = useState(false);

  const handleImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFile(e.target.files[0]);
      setShowCropper(true);
    }
  };

  const handleCroppedImage = (croppedBlob: Blob) => {
    // handle the blob (upload to server, preview, etc.)
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImage} />
      {showCropper && file && (
        <ImageCropper
          image={file}
          ratio={1}
          dimension={250}
          updateAvatar={handleCroppedImage}
          closeModal={() => setShowCropper(false)}
        />
      )}
    </div>
  );
}

Props

| Prop | Type | Description | | -------------- | ---------------------- | -------------------------------------------------- | | image | File | Required. The image file selected by the user. | | ratio | number | Required. Aspect ratio (e.g., 1, 4/3, 0.75). | | dimension | number | Required. Final cropped image size (in px). | | updateAvatar | (blob: Blob) => void | Required. Callback to return cropped image blob. | | closeModal | () => void | Required. Closes the cropping modal/component. |

License

MIT