Loading...
Please waitLoading...
Please waitManage a boolean state with the useBoolean hook, providing methods to set it to true, false, or toggle between them.
pnpm dlx uselab@latest add use-boolean
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>
</>
)
}| Name | Type | Description | Default Value | Optional |
|---|---|---|---|---|
defaultValue | boolean | The initial value for the boolean state (default is false). | false | Yes |
| Name | Type | Description |
|---|---|---|
setFalse | () => void | Function to set the boolean state to false. |
setTrue | () => void | Function to set the boolean state to true. |
setValue | Dispatch<SetStateAction<boolean>> | Function to set the boolean state directly. |
toggle | () => void | Function to toggle the boolean state. |
value | boolean | The current boolean state value. |