Reusable Imagecrop

# ImageUploadCrop — Quick Integration Guide

A one‑stop snippet to drop into your Markdown for copying and pasting.

---

## 1. Prerequisites

- **Component file**  
  Copy the supplied `components/ImageUploadCrop.tsx` into your project.

- **Install dependencies**
  ```bash
  yarn add react-image-crop @heroui/react
  ```

---

2. Import & State

import { useState } from "react"
import ImageUploadCrop from "@/components/ImageUploadCrop"

export default function MyComponent() {
  // holds the final cropped image URL
  const [croppedUrl, setCroppedUrl] = useState<string | null>(null)

  return <div>{/* … */}</div>
}

---

3. Render the Cropper

Place this where you want users to pick & crop their image:

<ImageUploadCrop
  width={200} // output width in px
  height={200} // output height in px
  aspectRatio={1} // 1 = square crop
  onCropComplete={(blob) => {
    // blob is a JPEG sized exactly 200×200 px
    // create a URL for preview or upload directly
    const url = URL.createObjectURL(blob)
    setCroppedUrl(url)
  }}
/>

---

4. Show Preview & “Remove” Button

After cropping, display the result and let users clear it:

{
  croppedUrl && (
    <div className="relative w-[200px] h-[200px] rounded-lg overflow-hidden">
      {/* Remove button at bottom‑right */}
      <button
        className="absolute bottom-2 right-2 bg-white p-1 rounded-full shadow"
        onClick={() => setCroppedUrl(null)}
      >
        ✕
      </button>

      {/* Cropped image */}
      <img
        src={croppedUrl}
        alt="Cropped preview"
        className="object-cover w-full h-full"
      />
    </div>
  )
}

---

5. Full Example

import { useState } from "react"
import ImageUploadCrop from "@/components/ImageUploadCrop"

export default function AvatarForm() {
  const [croppedUrl, setCroppedUrl] = useState<string | null>(null)

  return (
    <div className="space-y-6 p-8">
      <h1 className="text-xl font-semibold">Upload & Crop Your Avatar</h1>

      {/* 1. Cropper */}
      <ImageUploadCrop
        width={200}
        height={200}
        aspectRatio={1}
        onCropComplete={(blob) => {
          setCroppedUrl(URL.createObjectURL(blob))
        }}
      />

      {/* 2. Preview + remove */}
      {croppedUrl && (
        <div className="relative w-[200px] h-[200px] rounded-lg overflow-hidden">
          <button
            className="absolute bottom-2 right-2 bg-white p-1 rounded-full shadow"
            onClick={() => setCroppedUrl(null)}
          >
            ✕
          </button>
          <img
            src={croppedUrl}
            alt="Cropped preview"
            className="object-cover w-full h-full"
          />
        </div>
      )}
    </div>
  )
}

---

How it works

1. Click the dashed‑border card to select an image.
2. Adjust crop and zoom in the modal.
3. Hit “Crop Image” to close and fire your onCropComplete.
4. Preview appears with a small “✕” button to clear and re‑crop.

Simply copy this entire document into your .md file, adjust paths/styles as needed, and you’re ready to go!