Docs
useBoolean

Manage a boolean state with the useBoolean hook, providing methods to set it to true, false, or toggle between them.

Installation

pnpm dlx shadcn@latest add https://hookcn.ouassim.tech/r/use-boolean

Usage

import { useBoolean } from "@/hooks/use-boolean"
 
export function Component() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false)
 
  // Just an example to use "setValue"
  const customToggle = () => {
    setValue((x: boolean) => !x)
  }
 
  return (
    <>
      <p>
        Value is <code>{value.toString()}</code>
      </p>
      <button onClick={setTrue}>set true</button>
      <button onClick={setFalse}>set false</button>
      <button onClick={toggle}>toggle</button>
      <button onClick={customToggle}>custom toggle</button>
    </>
  )
}

API Reference

Parameters

NameTypeDescription
defaultValue?booleanThe initial value for the boolean state (default is false).

Returns

NameTypeDescription
setFalse() => voidFunction to set the boolean state to false.
setTrue() => voidFunction to set the boolean state to true.
setValueDispatch<SetStateAction<boolean>>Function to set the boolean state directly.
toggle() => voidFunction to toggle the boolean state.
valuebooleanThe current boolean state value.