Image Crop

import { ImageCrop } from '@hanzo/ui'

Default

A square preview with zoom, rotate and crop controls under it.

export function Default() {
  return (
    <YStack width="100%" maxW={480}>
      <ImageCrop src={PHOTO} />
    </YStack>
  )
}

Widescreen

`aspect` sets the frame's width-to-height ratio.

export function Widescreen() {
  return (
    <YStack width="100%" maxW={480}>
      <ImageCrop src={PHOTO} aspect={16 / 9} />
    </YStack>
  )
}

Portrait

A taller frame for a portrait crop, such as an avatar upload.

export function Portrait() {
  return (
    <YStack width="100%" maxW={320}>
      <ImageCrop src={PHOTO} aspect={3 / 4} />
    </YStack>
  )
}

Types

export interface ImageCropProps extends Omit<YStackProps, 'children'> {
  /** The image to preview and crop. */
  src: string
  /** Called with `src` when the Crop button is pressed. */
  onCrop?: (croppedImage: string) => void
  /** Width divided by height of the crop frame. Square by default. */
  aspect?: number
}

Exports

ImageCroptype ImageCropProps