Skip to main content

ItemResizeHandles

The Item Resize Handles component displays click handlers for a resize interactions. It stretches to the size of its parent element.

This component exports several constants, which can be used for the handles prop:

  • oneDimensionalHandles
  • intercardinalHandles
  • cardinalHandles
  • allHandles

The handles prop is optional and is set to intercardinalHandles by default.

nametyperequiredcomment
heightnumberyes

Height of the item, in pixels.

onChange(sizeDelta: Dimensions, positionDelta: Coordinates) => voidyes
onEnd(sizeDelta: Dimensions, positionDelta: Coordinates) => voidyes
rotationnumberyes

Rotation of the item, in degrees.

widthnumberyes

Width of the item, in pixels.

ariaLabelstringno
aspectRatioBehaviorAspectRatioBehaviorno

Configuration for aspect ratio.

classNamestringno
draggableSidesbooleanno

Boolean flag for controlling whether orthagonal handles will include an invisible draggable border (for resizing items by their sides in addition to the handle)

Default value: true
handlesHandle[]no

Array indicating which handles to show.

minHeightnumberno

Minimum height allowed for user resizing.

Default value: 2
minWidthnumberno

Minimum width allowed for user resizing.

Default value: 2
onStart() => voidno
roleAriaRoleno
styleCSSPropertiesno
Result
Loading...
Live Editor