Hook

useDisclosure

Boolean open/close/toggle state for dialogs, drawers, popovers and custom disclosure UI.

Hook

import { useDisclosure } from "@swirski/ui";

Live render

Preview

Disclosure state

Returns opened plus open, close, toggle and set handlers.

const [opened, handlers] = useDisclosure(false);

<Button onClick={handlers.toggle}>
  {opened ? "Close" : "Open"}
</Button>

3 documented

Prop	Type	Default	Notes
`defaultOpened`	`boolean`	`false`	Initial uncontrolled disclosure state.
`options.value`	`boolean`	`-`	Controlled disclosure state.
`options.onChange`	`(opened: boolean) => void`	`-`	Called whenever state changes.

5 documented

Value	Type	Notes
`opened`	`boolean`	Current disclosure state.
`handlers.open`	`() => void`	Sets the disclosure state to open.
`handlers.close`	`() => void`	Sets the disclosure state to closed.
`handlers.toggle`	`() => void`	Flips the current disclosure state.
`handlers.set`	`(opened: boolean) => void`	Sets the disclosure state directly.