useResizable @astryx-svelte/core v0.5.2 · Resizable
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
| Parameter | Type | Default | Description |
|---|---|---|---|
defaultSize | number | string | — | Initial size in pixels or percentage string (e.g. "20%"). |
minSizePx | number | 50 | Minimum size in pixels. |
maxSizePx | number | Infinity | Maximum size in pixels. |
collapsible | boolean | 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 | false | Initial collapse state (uncontrolled). A persisted entry wins over it. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |
isCollapsed | boolean | — | Controlled collapse state. collapse(), expand() and a drag past the threshold then report through onCollapseChange instead of changing state internally. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |
onCollapseChange | (isCollapsed: boolean) => void | — | Called once per collapse state change, via drag or programmatically. |
Returns
| Field | Type | Default | 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.Resizable — Collapsible with snap points
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.