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.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use with Layout or AppShell 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 and collapse state across sessions. |
defaultIsCollapsed | boolean (default: false) | Initial collapse state (uncontrolled). A persisted entry wins over it. |
isCollapsed | boolean | Controlled collapse state. collapse(), expand() and a drag past the threshold then report through onCollapseChange instead of changing state internally. |
onCollapseChange | (isCollapsed: boolean) => void | Called once per collapse state change, via drag or programmatically. |
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 ResizeHandle. |
Examples
Common configurations, variations, and states.A collapsible sidebar with snap points, driven by useResizable. Dragging snaps to preset widths, dragging past the minimum collapses the panel, and the expand method restores it programmatically.