How do I open and close a dialog with useBoolean?

Alias the fields: const { value: open, setTrue: show, setFalse: hide } = useBoolean(). Pass show and hide to the buttons. The dialog reads open. You don't need a fresh arrow function in each onClick.

shadcn.io is an independent project built on shadcn/ui

Docs

Free

useBoolean for React

Q: Can I connect useBoolean to a Switch?

Yes. toggle ignores extra arguments, so works. The switch passes the next boolean and useBoolean flips whatever it currently is.

Q: Is useBoolean safe to render on the server?

Yes. It only uses useState and useCallback. It never reads window or document, so the first render on the server and the client is the default you passed. A default that is not true or false throws on both.

Q: How do I type the return value?

The type is exported next to the hook: import { useBoolean, type UseBooleanReturn } from "@/hooks/use-boolean". It has value, setValue, setTrue, setFalse, and toggle.

Q: What is setValue for if I have setTrue and setFalse?

setValue is the raw setter, including the function form from useState. Use it when the next value comes from somewhere else, like a form or a prop. Use setTrue and setFalse when the next value is a constant.

A boolean with setTrue, setFalse and toggle, so you don't write all three by hand. For React, when a modal, a flag or a loading state is on or off.

useBoolean keeps one boolean, plus setTrue, setFalse, and toggle.

Use it for a dialog, a disclosure, or a flag. When the two states are not true and false, use useToggle. In React those three functions stay the same between renders, so a button can take them as its click handler.

PreviewCode

false

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { useBoolean } from "@/hooks/use-boolean";

const { value, setTrue, setFalse, toggle } = useBoolean();

Pass true to start on. setValue is there when you already have the next boolean, the same as useState.

FAQ

When should I use useBoolean instead of useState?

Use it when you want setTrue, setFalse, and toggle without writing them. Those three are memoized, so a child button can take them without a new function on every render. useState is enough when you only set the boolean in one place and don't pass the setter down.

Can I connect useBoolean to a Switch?

Yes. toggle ignores extra arguments, so <Switch checked={value} onCheckedChange={toggle} /> works. The switch passes the next boolean and useBoolean flips whatever it currently is.

Is useBoolean safe to render on the server?

Yes. It only uses useState and useCallback. It never reads window or document, so the first render on the server and the client is the default you passed. A default that is not true or false throws on both.

How do I type the return value?

The type is exported next to the hook: import { useBoolean, type UseBooleanReturn } from "@/hooks/use-boolean". It has value, setValue, setTrue, setFalse, and toggle.

What is setValue for if I have setTrue and setFalse?

setValue is the raw setter, including the function form from useState. Use it when the next value comes from somewhere else, like a form or a prop. Use setTrue and setFalse when the next value is a constant.