useDisclosure

State & data

open / close / toggle state for modals, drawers, popovers & accordions

Install

$ npm install @usefy/use-disclosure

Quick start

useDisclosure.tsx

import { useDisclosure } from "@usefy/use-disclosure";

function Example() {
  const [opened, { open, close, toggle }] = useDisclosure(false);

  return (
    <>
      <button onClick={open}>Open</button>
      <button onClick={toggle}>Toggle</button>
      {opened && (
        <div role="dialog">
          Modal content
          <button onClick={close}>Close</button>
        </div>
      )}
    </>
  );
}

API reference

const [opened, { open, close, toggle }] = useDisclosure(
  initialState, // boolean — starts open? (default: false)
  options,      // { onOpen?, onClose? } — optional transition callbacks
);

Parameters

Param	Type	Default	Description
`initialState`	`boolean`	`false`	Whether the disclosure starts open.
`options`	`UseDisclosureOptions`	`{}`	`{ onOpen?, onClose? }` — called on closed→open / open→closed.

Returns — `UseDisclosureReturn`

A readonly [opened, handlers] tuple:

opened: boolean — the current state.
handlers: { open, close, toggle } — control functions with stable identities.
- open() — set to true; fires onOpen only on a real closed → open change.
- close() — set to false; fires onClose only on a real open → closed change.
- toggle() — flip the state, firing the matching onOpen / onClose.

Example — reacting to transitions

const [opened, handlers] = useDisclosure(false, {
  onOpen: () => trackEvent("drawer_opened"),
  onClose: () => trackEvent("drawer_closed"),
});

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →