useDisclosure

NewSSR SAFE

Manages boolean open/close state for modals, dialogs, drawers, and collapsibles with memoized action handlers.

$ pnpm dlx shadcn@latest add @byphongphan/use-disclosure

Requires @byphongphan in components.json

state

use-disclosure.tsx

Dialog DisclosureClosed

Manages boolean visibility state with memoized action handlers

isOpen = false

Hook Action Handlers

Lifecycle Event Log

No events recorded yet. Click open() or toggle() above.

Available Handlers:

openclosetoggleset

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-disclosure

Requires @byphongphan in components.json

Usage

useDisclosure integrates seamlessly with UI dialogs and modals by binding isOpen to open and handlers.set directly to onOpenChange:

import { useDisclosure } from "@/shared/hooks"import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,} from "@/registry/ui/dialog"import { Button } from "@/registry/ui/button"
export function DeploymentModal() {  const [isOpen, handlers] = useDisclosure(false)
  return (    <>      <Button onClick={handlers.open}>Open Modal</Button>
      <Dialog open={isOpen} onOpenChange={handlers.set}>        <DialogContent>          <DialogHeader>            <DialogTitle>Confirm Deployment</DialogTitle>            <DialogDescription>              Are you sure you want to deploy to production?            </DialogDescription>          </DialogHeader>
          <DialogFooter>            <Button variant="outline" onClick={handlers.close}>              Cancel            </Button>            <Button onClick={handlers.close}>              Confirm            </Button>          </DialogFooter>        </DialogContent>      </Dialog>    </>  )}

Lifecycle Callbacks

You can track opening and closing actions, initialize resources, or report telemetry using optional onOpen and onClose callbacks:

import { useDisclosure } from "@/shared/hooks"
export function TrackedDrawer() {  const [isOpen, { open, close, toggle }] = useDisclosure(false, {    onOpen: () => {      console.log("Analytics: Drawer opened")    },    onClose: () => {      console.log("Analytics: Drawer closed")    },  })
  return (    <div>      <button onClick={toggle}>Toggle Drawer</button>      {isOpen && <aside>Drawer Content</aside>}    </div>  )}

Props & Parameters

Param	Type	Default	Description
`initialState`	`boolean`	`false`	Initial boolean open/close state.
`callbacks`	`UseDisclosureCallbacks`	—	Optional object containing `onOpen` and `onClose` callback events.

UseDisclosureCallbacks

Property	Type	Description
`onOpen`	`() => void`	Optional callback triggered when state becomes `true`.
`onClose`	`() => void`	Optional callback triggered when state becomes `false`.

Returns

useDisclosure returns a tuple [isOpen, handlers]:

Return	Type	Description
`isOpen`	`boolean`	Current boolean open status.
`handlers`	`UseDisclosureHandlers`	Stable memoized object containing action helper functions.

UseDisclosureHandlers

Handler	Type	Description
`open`	`() => void`	Sets boolean state to `true` and triggers `onOpen`.
`close`	`() => void`	Sets boolean state to `false` and triggers `onClose`.
`toggle`	`() => void`	Toggles state and executes the corresponding callback.
`set`	`(value: boolean) => void`	Sets the boolean value directly (ideal for `onOpenChange`).