Parameters

Name	Type	Default	Description
defaultSize	ResizableSize | string	250	Initial size. Numbers, exact "Npx", and pixel(value) are pixels. Exact "N%" has no additional pixel bound. percent(value, { min: pixel(value) }) or percent(value, { max: pixel(value) }) adds one pixel floor or ceiling. A percentage resolves once into pixels, against containerRef when supplied and against the viewport otherwise, and does not track its basis afterwards.
minSize	ResizableSize | string	50	Minimum size. Numbers, exact "Npx", and pixel(value) remain pixels; exact "N%" has no additional pixel bound; percent() adds exactly one. Percentage minimums re-resolve when their basis changes and clamp the current pixel selection.
maxSize	ResizableSize | string	Infinity	Maximum size. Numbers, exact "Npx", and pixel(value) remain pixels; exact "N%" has no additional pixel bound; percent() adds exactly one. Percentage maximums re-resolve when their basis changes and clamp the current pixel selection.
containerRef	Ref<HTMLElement | null>	—	The element a percentage is a share of. Caller-owned: the hook never infers one. Omitted, percentages use the viewport. The ref may point at a different element over time and the basis follows it. Until that element is laid out (not yet mounted, display:none, detached) percentages use a temporary 1200px basis and nothing is persisted from it.
direction	'horizontal' | 'vertical'	'horizontal'	Which axis this region resizes along. Selects the container's inline or block content-box size as the percentage basis, and must match the direction given to ResizeHandle.
collapsible	boolean	false	Whether dragging below the collapsed threshold collapses the region to zero.
collapsedSize	number	40	Pixel threshold below which a collapsible region snaps to zero.
snaps	number[]	[]	The size stops only on these pixel points. An equal distance stays on the earlier point.
autoSaveId	string	—	Key for localStorage persistence of size and collapse state across sessions, stored under astryx-resizable:.
defaultIsCollapsed	boolean	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.
onSizeChange	(size: number) => void	—	Called with the resolved pixel size after every drag, resize, or collapse.
onCollapseChange	(isCollapsed: boolean) => void	—	Called once per collapse state change, via drag or programmatically.

useResizable({ regions }) instead takes regions (a map of key to ResizableRegionConfig) plus direction, containerRef, and autoSaveId. Each region accepts the size, collapse, and snap fields above, and shrinkOrder: a lower number gives up space first when the container is narrower than the regions.

Returns

Name	Type	Description
size	number	Current size in pixels. Reactive.
isCollapsed	boolean	Whether the region is currently collapsed. Reactive.
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.

With a regions map, the return value is Record<string, ResizableRegion>: one object of the same shape per key.