Playground

Change the props

Root

Viewport

Tilt the photo

Perspective tilts the photo as if the camera leaned. No part sets it, so pass it in value or defaultValue, or call setValue(). Value has its range.

Copy the code

The code builds the cropper in the demo. It lists the props you changed from their defaults, and the tilt even at 0° so the code keeps its shape while you drag:

<Cropper.Root
  src={photo}
  defaultValue={{ perspective: { vertical: 0, horizontal: 0 } }}
>
  <Cropper.Viewport style={{ height: 380 }}>
    <Cropper.Image />
    <Cropper.Mask />
    <Cropper.Area aria-label="Crop area" />
  </Cropper.Viewport>
  <Cropper.Rotate aria-label="Rotate left" />
  <Cropper.DialValue />
  <Cropper.Dial aria-label="Straighten">
    <Cropper.DialTicks />
  </Cropper.Dial>
  <Cropper.Flip aria-label="Flip" />
</Cropper.Root>

The demo adds handles, a grid and reset, shows the angle to one decimal and uses the styles from the zriz site. On a phone its stage is 320 px tall, not the 380 in the code. It tilts the photo with setValue() and listens to onValueChange and onValueCommit for the value and the events below.

Watch the value

The crop as you move it, the same object onValueChange and onValueCommit hand you:

{
  "aspect": "free",
  "center": {
    "x": 0.5,
    "y": 0.5
  },
  "mirrored": false,
  "perspective": {
    "horizontal": 0,
    "vertical": 0
  },
  "quarterTurns": 0,
  "rotation": 0,
  "size": {
    "height": 1,
    "width": 1
  }
}

Watch the events

Each row is a reason and a phase from onValueChange, or a commit from onValueCommit, as in events, newest first: