use-disclosure (use-disclosure)
Manages boolean state for UI components like dialogs, modals, and popovers.
v0.1.0
Usage
import { use-disclosure } from "@/hooks"1"use client";
2
3import React from "react";
4
5import { Button } from "@/components/ui/button";
6import {
7 Card,
8 CardContent,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13} from "@/components/ui/card";
14import {
15 Dialog,
16 DialogContent,
17 DialogDescription,
18 DialogFooter,
19 DialogHeader,
20 DialogTitle,
21 DialogTrigger,
22} from "@/components/ui/dialog";
23
24import { useDisclosure } from "@/components/hooks/use-disclosure";
25
26export function UseDisclosureDemo() {
27 const [isOpen, { close, toggle }] = useDisclosure(false, {
28 onOpen: () => console.log("Dialog opened"),
29 onClose: () => console.log("Dialog closed"),
30 });
31
32 return (
33 <Card className="relative max-w-sm w-full">
34 <CardHeader>
35 <CardTitle>useDisclosure</CardTitle>
36 <CardDescription>
37 This component uses the <code>useDisclosure</code> hook to manage the
38 state of a dialog component.
39 </CardDescription>
40 </CardHeader>
41 <CardContent>
42 <p>
43 Dialog is: <strong>{isOpen ? "Open" : "Closed"}</strong>
44 </p>
45 </CardContent>
46 <CardFooter className="flex gap-2">
47 <Dialog open={isOpen} onOpenChange={toggle}>
48 <DialogTrigger asChild>
49 <Button>Open Dialog</Button>
50 </DialogTrigger>
51 <DialogContent>
52 <DialogHeader>
53 <DialogTitle>Example Dialog</DialogTitle>
54 <DialogDescription>
55 This is an example dialog controlled by the useDisclosure hook.
56 </DialogDescription>
57 </DialogHeader>
58 <DialogFooter>
59 <Button variant="outline" onClick={close}>
60 Close
61 </Button>
62 <Button onClick={close}>Confirm</Button>
63 </DialogFooter>
64 </DialogContent>
65 </Dialog>
66 <Button variant="outline" onClick={toggle}>
67 Toggle Dialog
68 </Button>
69 </CardFooter>
70 </Card>
71 );
72}
73Install
npx wkkkis-hooks add use-disclosureOptions
| Name | Type | Default | Description |
|---|---|---|---|
| initialState | boolean | false | The initial state of the disclosure |
| callbacks | DisclosureCallbacks | {} | Callback functions for open and close events |
State Management
- The hook manages a boolean state that represents whether a component is open or closed
- The state can be controlled through the returned functions: open , close , and toggle
Callbacks
- onOpen : Called when the disclosure is opened
- onClose : Called when the disclosure is closed
- Callbacks are optional and can be used for side effects
Best Practices & Caveats
- Use this hook for components that need to be shown/hidden
- Perfect for dialogs, modals, popovers, and drawers
- The hook is client-side only
- For best performance, memoize the callbacks if they depend on other values
Files in this hook
| Source | Destination |
|---|---|
| files/use-disclosure.ts | src/hooks/use-disclosure.ts |