View source code on GitHub

Use a boolean value.

Useful when managing the opening and closing of modals, drawers, etc.

useBoolean(defaultValue?: boolean): {
  value: boolean;
  set: (value: boolean) => void;
  toggle: () => void;
  on: () => void;
  off: () => void;

The initial boolean value.

Default: false

The stateful boolean value.

Set value to either true or false.

Toggle value between true and false.

Set value to true.

Set value to false.

import { useBoolean } from "@mrcaidev/hooks";

export function Component() {
  const { value, toggle } = useBoolean();

  return <button onClick={toggle}>{value ? "On" : "Off"}</button>;