Setting the file. One moment.
Subchapter 18.233
references/useToggle.mdMarkdown2 KBView on GitHub
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)The toggle function can be called in two ways:
const [value, toggle] = useToggle()
toggle() // toggle between true and false
toggle(true) // set to specific value
// The toggle function returns the new value
const newValue = toggle() // returns the new value after togglingYou can use custom truthy and falsy values instead of true and false:
import { useToggle } from '@vueuse/core'
const [value, toggle] = useToggle('on', {
truthyValue: 'on',
falsyValue: 'off',
})
toggle() // 'off'
toggle() // 'on'The custom values can also be reactive:
import { useToggle } from '@vueuse/core'
import { ref } from 'vue'
const truthy = ref('yes')
const falsy = ref('no')
const [value, toggle] = useToggle('yes', {
truthyValue: truthy,
falsyValue: falsy,
})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 be passed in.
<!-- caution: $event will be passed in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />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]