Resizable

API reference for @udecode/plate-resizable.

Features

  • Resizable elements with handles
  • Configurable min/max width constraints
  • Center/left/right alignment support
  • Width persistence in editor state

Installation

npm install @udecode/plate-resizable

API

useResizableState

Manages state for resizable elements.

OptionsResizableOptions

Collapse all

    Node alignment.

    • Default: 'center'

    Maximum width constraint.

    • Default: '100%'

    Minimum width constraint.

    • Default: 92

    Whether the element is resizable in read-only mode.

Returnsobject

Collapse all

    Current alignment setting.

    Maximum width constraint.

    Minimum width constraint.

    Updates node width in editor state.

    Updates width in local state.

    Current width value.

useResizable

Provides resize behavior props and handlers for resizable elements.

Parameters

Collapse all

    State from useResizableState.

Returnsobject

Collapse all

    Style props for the resizable element:

    • maxWidth: Maximum width constraint
    • minWidth: Minimum width constraint
    • position: 'relative'
    • width: Current width

    Style props for the wrapper element:

    • position: 'relative'

    Reference to the wrapper element.

useResizeHandleState

Manages state for resize handle elements.

OptionsResizeHandleOptions

Collapse all

    Direction of resize.

    • Default: 'left'

    Initial size of the resizable element.

    Callback when handle is hovered.

    Callback when handle hover ends.

    Custom mouse down handler.

    Custom resize handler. Falls back to store handler if not provided.

    Custom touch start handler.

Returnsobject

Collapse all

    Current resize direction.

    Initial cursor/touch position.

    Initial element size.

    Whether resize direction is horizontal.

    Whether resize is in progress.

    Editor read-only state.

    Update initial position.

    Update initial size.

    Update resize state.

    Hover callback.

    Hover end callback.

    Mouse down handler.

    Resize handler.

    Touch start handler.

useResizeHandle

Provides handlers and props for resize handle elements.

Parameters

Collapse all

    State from useResizeHandleState.

Returnsobject

Collapse all

    Whether the handle should be hidden (in read-only mode).

    Props to spread on the handle element:

    • onMouseDown: Mouse down event handler
    • onMouseOut: Mouse out event handler
    • onMouseOver: Mouse over event handler
    • onTouchEnd: Touch end event handler
    • onTouchMove: Touch move event handler
    • onTouchStart: Touch start event handler