Image Cropper

Root · Viewport · Image · Selection · Handle · Grid

#Grid

Prop	Type	Default	Description
`axis`	`"horizontal" \| "vertical"`		The axis of the grid lines to display

#Handle

Prop	Type	Default	Description
`position`	`HandlePosition`		The position of the handle

#Image

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`aspectRatio`	`number`		The aspect ratio to maintain for the crop area (width / height). For example, an aspect ratio of 16 / 9 will maintain a width to height ratio of 16:9. If not provided, the crop area can be freely resized.
`cropShape`	`'rectangle' \| 'circle'`	`"rectangle"`	The shape of the crop area.
`defaultFlip`	`imageCropper.FlipState`	`{ horizontal: false, vertical: false }`	The initial flip state to apply to the image.
`defaultRotation`	`number`	`0`	The initial rotation to apply to the image in degrees.
`defaultZoom`	`number`	`1`	The initial zoom factor to apply to the image.
`fixedCropArea`	`boolean`	`false`	Whether the crop area is fixed in size and position.
`flip`	`imageCropper.FlipState`		The controlled flip state of the image.
`ids`	`imageCropper.ElementIds`		The ids of the image cropper elements
`initialCrop`	`Rect`		The initial rectangle of the crop area. If not provided, a smart default will be computed based on viewport size and aspect ratio.
`maxHeight`	`number`	`Infinity`	The maximum height of the crop area
`maxWidth`	`number`	`Infinity`	The maximum width of the crop area
`maxZoom`	`number`	`5`	The maximum zoom factor allowed.
`minHeight`	`number`	`40`	The minimum height of the crop area
`minWidth`	`number`	`40`	The minimum width of the crop area
`minZoom`	`number`	`1`	The minimum zoom factor allowed.
`nudgeStep`	`number`	`1`	The base nudge step for keyboard arrow keys (in pixels).
`nudgeStepCtrl`	`number`	`50`	The nudge step when Ctrl/Cmd key is held (in pixels).
`nudgeStepShift`	`number`	`10`	The nudge step when Shift key is held (in pixels).
`rotation`	`number`		The controlled rotation of the image in degrees (0 - 360).
`translations`	`imageCropper.IntlTranslations`		Specifies the localized strings that identify accessibility elements and their states.
`zoom`	`number`		The controlled zoom level of the image.
`zoomSensitivity`	`number`	`2`	Controls how responsive pinch-to-zoom is.
`zoomStep`	`number`	`0.1`	The amount of zoom applied per wheel step.

Event	Payload
`zoomChange`	`details: ZoomChangeDetails`
`update:zoom`	`zoom: number`
`rotationChange`	`details: RotationChangeDetails`
`update:rotation`	`rotation: number`
`flipChange`	`details: FlipChangeDetails`
`update:flip`	`flip: FlipState`
`cropChange`	`details: CropChangeDetails`
`update:crop`	`crop: Rect`

#Selection

A styled part — no props of its own; it takes the anatomy's shared styling.

#Viewport

A styled part — no props of its own; it takes the anatomy's shared styling.