Collapsible

An interactive component for collapsing and expanding sections of content.

Import#

import { Collapsible } from '@volue/wave-react';

// you may also access Collapsible's context via hook:
// import { useCollapsibleContext } from '@volue/wave-react';

Collapsible is a compound component that consists of multiple parts:

Collapsible.Root: The wrapper that contains all the parts of a collapsible and provides context for its children.
Collapsible.Trigger: The button that toggles the collapsible.
Collapsible.Panel: The container for the collapsible content.

Examples#

Basic#

Collapsible works in an uncontrolled way by default, meaning each Collapsible component instance is responsible for managing its own state internally.

The Collapsible.Trigger component can be instructed via as prop to render as something else. In our case we want to render it as a <Button> component.

Controlled Collapsible#

You can easily make the collapsible controlled, by passing your own state to isOpen prop. onIsOpenChange handler is called when the state of the collapsible changes, allowing you to sync state.

With starting height#

Unmount on exit#

You can force <Collapsible.Panel> children to unmount when exit state is done by setting unmountOnExit to true.

API Reference#

Collapsible.Root#

Prop	Type	Default
`isOpen`	`boolean`	`false`
`defaultIsOpen`	`boolean`	No default value
`onIsOpenChange`	`function`	No default value

Collapsible.Trigger#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

Collapsible.Panel#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`unmountOnExit`	`boolean`	`false`
`startingHeight`	`string \| number`	No default value
`onAnimationComplete`	`function`	No default value
`onExitComplete`	`function`	`() => void`
`containPaint`	`boolean`	`true`