fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.4 KiB
1.4 KiB
category
| category |
|---|
| Utilities |
useToggle
A boolean switcher with utility functions.
Usage
import { useToggle } from '@vueuse/core';
const [value, toggle] = useToggle();
When you pass a ref, useToggle will return a simple toggle function instead:
import { useDark, useToggle } from '@vueuse/core';
const isDark = useDark();
const toggleDark = useToggle(isDark);
Note: be aware that the toggle function accepts the first argument as the override value. You might want to avoid directly passing the function to events in the template, as the event object will pass in.
<!-- caution: $event will be pass in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />
Type Declarations
export type ToggleFn = (value?: boolean) => void;
export type UseToggleReturn = [ShallowRef<boolean>, ToggleFn] | ToggleFn;
export interface UseToggleOptions<Truthy, Falsy> {
truthyValue?: MaybeRefOrGetter<Truthy>;
falsyValue?: MaybeRefOrGetter<Falsy>;
}
export declare function useToggle<Truthy, Falsy, T = Truthy | Falsy>(
initialValue: Ref<T>,
options?: UseToggleOptions<Truthy, Falsy>,
): (value?: T) => T;
export declare function useToggle<Truthy = true, Falsy = false, T = Truthy | Falsy>(
initialValue?: T,
options?: UseToggleOptions<Truthy, Falsy>,
): [ShallowRef<T>, (value?: T) => T];