useToggle hook overview
The useToggle hook implements a common state pattern that switches state between given values. It is part of the @mantine/hooks package.
hooks/use-toggle
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useToggle basic usage example
Example using useToggle with string values: import { useToggle } from '@mantine/hooks'; const [value, toggle] = useToggle(['light', 'dark'] as const); toggle(); // -> value == 'dark' toggle(); // -> value == 'light' toggle('dark'); // -> value == 'dark' (force specific value)
useToggle default boolean behavior
If no array argument is provided to useToggle, it uses boolean values with false as the default value. Calling toggle() will switch between true and false.
useToggle boolean default example
Example without arguments: import { useToggle } from '@mantine/hooks'; const [value, toggle] = useToggle(); // -> value === false toggle(); // -> value === true
useToggle first option is default
The hook accepts an array as a single argument, and the first option in the array will be used as the default value.
useToggle return value structure
The hook returns an array with two elements: the current state value and a toggle function to switch between values.
useToggle force specific value
You can pass an optional argument to the toggle function to force the state to a specific value: toggle('dark') will set state to 'dark' regardless of the current value.
useToggle TypeScript type widening with const assertion
By default, TypeScript will infer the type as a union of string values. To get a precise literal union type and prevent type widening, use const assertion: useToggle(['light', 'dark'] as const) will give type 'dark' | 'light' instead of string.
useToggle TypeScript type examples
Type inference examples: useToggle(['light', 'dark']) gives value type string; useToggle(['light', 'dark'] as const) gives value type 'dark' | 'light'; useToggle<'dark' | 'light'>(['light', 'dark']) also gives value type 'dark' | 'light'.
useToggle function signature
TypeScript definition: type UseToggleAction<T> = (value?: React.SetStateAction<T>) => void; type UseToggleReturnValue<T> = [T, UseToggleAction<T>]; function useToggle<T = boolean>(options?: T[]): UseToggleReturnValue<T>;
UseToggleReturnValue type export
The UseToggleReturnValue type is exported from @mantine/hooks and can be imported for TypeScript type annotations.