useDisclosure

Open, close and toggle state for overlays and disclosures.

HooksState@gaudi/design-system/hooks/state/use-disclosureView in Storybook Source

Open state for dialogs, menus, drawers and custom disclosures, controlled or uncontrolled, with getTriggerProps for a custom trigger.

Usage

import { useDisclosure } from '@gaudi/design-system/hooks';
const { open, setOpen, onOpen } = useDisclosure();
<Button onClick={onOpen}>Share</Button><Dialog open={open} onOpenChange={setOpen} title='Share'>…</Dialog>

Examples

Drive a Gaudi Dialog

Storybook

Custom disclosure

Storybook

API

3 options

3 return values

Accessibility

A custom trigger must be a button with aria-expanded and, when the region is in the page, aria-controls; getTriggerProps adds both.

Notes

Gaudi overlays take open and onOpenChange directly: pass them through.

useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.