useCrop

Controls crop mode for the selected image item on the canvas.

Import

import { useCrop } from '@asset-studio/core'

Usage

function CropControls() {
  const { isCropMode, changeCropMode } = useCrop()

  return (
    <button onClick={() => changeCropMode(!isCropMode)}>
      {isCropMode ? 'Cancel Crop' : 'Crop'}
    </button>
  )
}

Return Value

Property / Function	Type	Description
isCropMode	boolean	Whether crop mode is currently active.
changeCropMode	(value: boolean) => void	Enable or disable crop mode for the selected item.
crop	CropRect | null	The current crop rectangle, or null if none is applied.
setCrop	(crop: CropRect | null) => void	Manually set the crop rectangle.

Types

type CropRect = {
  x: number
  y: number
  w: number
  h: number
}

Notes

• Crop mode only applies to the currently selected image item.
• Calling changeCropMode(true) with no image selected has no effect.
• Set crop to null to remove the crop from the selected item.