ImageCropper
Interactive image crop tool with drag-to-reposition and resize handles for selecting a crop region.
Examples
Basic
Drag the crop region or resize from corner handles.
With aspect ratio
Aspect ratio buttons resize the crop region to match.
With preview
Live cropped thumbnail updates as you drag the crop region.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { ImageCropper } from "@rokle/components";import { ImageCropper } from "@rokle/components";
export function Example() {
return <ImageCropper />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | URL of the image to crop. |
| aspectRatio | number | 1 | Crop area aspect ratio (width / height). |
| onCropChange | (crop: CropArea) => void | - | Called when crop region changes. |