useCollapsible @astryx-svelte/core v0.3.0 · Collapsible
Usage
Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenChange), and uncontrolled (self-managed with defaultIsOpen). Used internally by Card and Section.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use the hook directly when building custom collapsible components that need Astryx collapsible behavior without Collapsible wrapper. |
| Do | For accordion behavior, wrap items in CollapsibleGroup and pass unique value props. |
| Don't | Implement your own open/close state when useCollapsible already provides it; the hook handles group coordination automatically. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
isCollapsible | boolean | CollapsibleConfig | — | Enable collapsible behavior. true = self-managed (starts open). Pass config object for controlled mode or custom defaults. |
value | string | — | Unique identifier within an CollapsibleGroup. When present and inside a group, state is managed by the group. |
Returns
| Field | Type | Default | Description |
|---|---|---|---|
isEnabled | boolean | — | Whether collapsible behavior is active. |
isOpen | boolean | — | Whether the content is currently expanded. |
toggle | () => void | — | Toggle open/closed state. Dispatches to group, controlled callback, or internal state. |
Examples
Common configurations, variations, and states.useCollapsible — Custom Disclosure
Custom disclosure UI built directly with useCollapsible for headless open/close state.