import { useCollapse } from '@uhg-abyss/web/hooks/useCollapse';

Usage

Use the defaultIsOpen prop to set the initial state for collapse container. The duration prop is defaulted to 300ms, we can pass custom values to vary the transition time.

Maximum duration

Use the duration prop to set the transition timing (in milliseconds) for showing and hiding content. This prop accepts a number between 0 and 1500. Any value greater than 1500 will be set to 1500 internally. The default value is 250.

For users who have prefers-reduced-motion set to reduced for accessibility reasons, the duration is overridden to 0 to prevent the animation transition.

Collapsing multiple

To control the expand/collapse functionality of multiple collapsible containers utilize the CollapseProvider. See the CollapseProvider page for more details and examples on implementation.

Properties

useCollapse(
  defaultIsOpen?: boolean,
  ref?: object,
  duration?: number,
): object;