useToggle
A boolean switcher with utility functions.
Demo
Value: OFF
Usage
import { useToggle } from '@vueuse/core'
const [value, toggle] = useToggle()
import { useToggle } from '@vueuse/core'
const [value, toggle] = useToggle()
When you pass a ref, useTogglewill return a simple toggle function instead:
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)
Type Declarations
export interface UseToggleOptions<Truthy, Falsy> {
truthyValue?: MaybeRef<Truthy>
falsyValue?: MaybeRef<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>
): [Ref<T>, (value?: T) => T]
export interface UseToggleOptions<Truthy, Falsy> {
truthyValue?: MaybeRef<Truthy>
falsyValue?: MaybeRef<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>
): [Ref<T>, (value?: T) => T]
Source
Contributors
Anthony Fu
Jelf
webfansplz
Alex Kozack
Alexey Iskhakov