Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA boolean you can flip, set on, set off or reset, with stable handlers, or cycle through a list of values.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for open and closed panels, on and off switches and any two-state flag, or pass a list of values to cycle through (for example a sort direction or a view mode).
Do not use it for a value that needs validation or history; use useState or useUndoState.
import { useToggle } from "@/hooks/use-toggle"const [open, { toggle, on, off }] = useToggle(false)
const [view, { toggle: nextView }] = useToggle("list", [
"list",
"grid",
"table",
])useToggle<T = boolean>(initial?, values?): [T, { toggle, set, on, off, reset }]
| Name | Type | Default | Description |
|---|---|---|---|
initial | T | false | Starting value. |
values | readonly T[] | [false, true] | The values to cycle through. toggle moves to the next one. |
toggle() moves to the next value (wrapping), set(value) sets it, on() and off() set the first and second value of the default boolean pair, reset() returns to initial. All handlers keep the same identity.
A hook has no markup. When the value drives a button, expose it with aria-pressed (toggle button) or aria-expanded (disclosure) so assistive technology reads the state.
The hook ships with renderHook tests (use-toggle.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.