useXDSResizable@xds/core · Resizable
Preview coming soon
Usage
Hook for adding drag-to-resize behavior to layout regions. Supports single-region and multi-region configurations with snap points, collapsible panels, localStorage persistence, and cascade resize ordering.Best practices
| Guidance | Practices |
|---|---|
| Do | Use with XDSLayout or XDSAppShell sidebar for resizable navigation panels. |
| Do | Set autoSaveId to persist user-chosen sizes across page reloads. |
| Don't | Set minSizePx too small — content becomes unreadable. Prefer collapsible for panels that can hide entirely. |
Parameters
| Param | Type | Description |
|---|---|---|
defaultSize | number | string | Initial size in pixels or percentage string (e.g. "20%"). |
minSizePx | number (default: 50) | Minimum size in pixels. |
maxSizePx | number (default: Infinity) | Maximum size in pixels. |
collapsible | boolean (default: false) | Whether dragging below the collapsed threshold collapses the region to zero. |
snaps | number[] | Pixel values to snap to during drag. |
autoSaveId | string | Key for localStorage persistence of size across sessions. |
Returns
| Field | Type | Description |
|---|---|---|
| size | number | Current size in pixels. |
| isCollapsed | boolean | Whether the region is currently collapsed. |
| collapse | () => void | Programmatically collapse the region. |
| expand | () => void | Expand from collapsed state. |
| resize | (size: number) => void | Resize to a specific pixel value. |
| props | ResizableProps | Props to spread on the resizable component or pass to XDSResizeHandle. |
Import
ts