<ImageCropper.Root>
<ImageCropper.Dropzone />
<ImageCropper.Area />
</ImageCropper.Root>The parts behind ImageUploadField, for when you need
the crop step inside a dialog or a flow of your own. useImageCropper gives
you the crop area and the zoom so you can drive them from your own controls.
API
ImageCropper.Root
| Prop | Type | Default | |
|---|---|---|---|
accept | string | "image/*" | File input accept filter. |
aspectRatio | number | 1 | Width / height ratio of the crop viewport, e.g. 1 for avatars or 16 / 9 for covers. |
crossOrigin | CrossOrigin | "anonymous" | CORS mode for remote image URLs — without it the export canvas is tainted and cropToBlob throws a SecurityError. Picked files load through blob: URLs and never need it. |
defaultImage | string | — | Image URL to start cropping without going through file selection. |
disabled | boolean | false | |
initialFocus | Partial<ImageCropperFocus> | — | Where the crop opens on a freshly loaded image, in fractions of the image's own size; defaults to its centre. A portrait crop wants something above that — heads sit in the upper half of a photo, so a centred square crop of one reliably takes the chin off. The opening position only: panning, zooming and the exported crop are unchanged, and the value is clamped, so an axis with no slack ignores it. |
maxZoom | number | 4 | |
minZoom | number | 1 | Lowest zoom level; 1 means the image exactly covers the viewport. |
onCropChange | ((cropArea: ImageCropperCropArea) => void) | — | Reports the crop rectangle in natural image pixels whenever it moves. |
onImageChange | ((file: File | null) => void) | — | Reports the picked file, or null when the image is removed. |
Plus every <div> prop. Source: image-cropper/components/image-cropper-root.tsx.
ImageCropper.Area
| Prop | Type | Default | |
|---|---|---|---|
shape | "circle" | "rectangle" | "rectangle" | Visual mask drawn over the viewport; "circle" pairs with aspectRatio 1. |
Plus every <div> prop. Source: image-cropper/components/image-cropper-area.tsx.
ImageCropper.Dropzone
| Prop | Type | Default | |
|---|---|---|---|
description | string | "Click to browse or drag and drop" | |
label | string | "Choose an image" |
Plus every <div> prop. Source: image-cropper/components/image-cropper-dropzone.tsx.