Vize
use-toggle
Create owned boolean state with an inverting control.
| Package | @vizejs/composable/use-toggle |
| Own the source | vize lib pull composable:use-toggle |
| Runtime exports | useToggle |
| Gzip budget | 512 B |
Usage
import { useToggle } from "@vizejs/composable/use-toggle";
Runtime contract
| Utility | Category | Stability | SSR | Hydration | Cleanup | Targets | Host globals | Uses |
|---|---|---|---|---|---|---|---|---|
useToggle |
state | experimental | safe | stable | none | web, server, worker, native, desktop, terminal | — | — |
API
useToggle
Create owned boolean state with an inverting control. Purely synchronous state: safe during server rendering (no browser globals, no timers) and nothing to dispose, so it works inside and outside reactive scopes alike.
function useToggle(initial = false): ToggleControls
const { state: open, toggle } = useToggle();
toggle(); // true
toggle(false); // false
open.value; // false
Types
ToggleControls
Reactive controls returned by useToggle.
| Member | Type | Description |
|---|---|---|
state |
Ref<boolean> |
Owned boolean state. Deliberately writable: unlike the derived views elsewhere in this package, the toggle owns its state, so assigning the ref directly (for example through v-model) is equivalent to calling ToggleControls.toggle with a forced value. |
toggle |
(force?: boolean) => boolean |
Invert the state, or force it to force when the argument is given. Passing an explicit undefined behaves like passing no argument. |