ImageCropper

A component used to crop and transform images.

Usage

Gives you full control over the layout and styling of image cropping interface.

import { ImageCropper } from "@elemnts-ui/react";

<ImageCropper.Root aspectRatio={1}>
  <ImageCropper.Viewport>
    <ImageCropper.Image src="..." />
    <ImageCropper.Selection>
      <ImageCropper.Grid />
      <ImageCropper.Handle position="top-left" />
      <ImageCropper.Handle position="top-right" />
      <ImageCropper.Handle position="bottom-left" />
      <ImageCropper.Handle position="bottom-right" />
    </ImageCropper.Selection>
  </ImageCropper.Viewport>
</ImageCropper.Root>;

Controls

Use the ImageCropper.Context or the useImageCropperContext hook to access methods like rotateBy, zoomBy, and reset to build custom controls.

API Reference

ImageCropperRoot

The root component for the image cropper.

Prop	Type	Default
asChild	`boolean`	`undefined`
aspectRatio	`number`	`undefined`
cropShape	`'circle' \| 'rectangle'`	`rectangle`
defaultFlip	`FlipState`	`{ horizontal: false, vertical: false`
defaultRotation	`number`	`0`
defaultZoom	`number`	`1`
fixedCropArea	`boolean`	`false`
flip	`FlipState`	`undefined`
initialCrop	`Rect`	`undefined`
maxHeight	`number`	`Infinity`
maxWidth	`number`	`Infinity`
maxZoom	`number`	`5`
minHeight	`number`	`40`
minWidth	`number`	`40`
minZoom	`number`	`1`
nudgeStep	`number`	`1`
nudgeStepCtrl	`number`	`50`
nudgeStepShift	`number`	`10`
onCropChange	`(details: CropChangeDetails) => void`	`undefined`
onFlipChange	`(details: FlipChangeDetails) => void`	`undefined`
onRotationChange	`(details: RotationChangeDetails) => void`	`undefined`
onZoomChange	`(details: ZoomChangeDetails) => void`	`undefined`
rotation	`number`	`undefined`
translations	`IntlTranslations`	`undefined`
zoom	`number`	`undefined`
zoomSensitivity	`number`	`2`
zoomStep	`number`	`0.1`

ImageCropperHandle

The handle component for the image cropper.

Prop	Type	Default
position	`HandlePosition`	`undefined`
asChild	`boolean`	`undefined`