`useDisclosure`

Manages a boolean open / close state with stable open, close, and toggle handlers. Use it for modals, drawers, dropdowns, accordions — anything with a binary open state that doesn’t need to be controlled from the outside.


import { useDisclosure } from '@wire-ui/react'
 
function ExampleModal() {
  const { isOpen, open, close, toggle } = useDisclosure({
    defaultOpen: false,
    onOpenChange: (next) => console.log('open changed:', next),
  })
 
  return (
    <>
      <button onClick={open}>Open</button>
      {isOpen && (
        <div role="dialog">
          <button onClick={close}>Close</button>
        </div>
      )}
    </>
  )
}

Options

Option	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes.

Returns

Key	Type	Description
`isOpen`	`boolean`	Current open state.
`open`	`() => void`	Sets the state to `true`.
`close`	`() => void`	Sets the state to `false`.
`toggle`	`() => void`	Flips the current state.
`setOpen`	`(value: boolean) => void`	Sets the state directly.