Skip to content

useToggle ​

Category
Export Size
200 B
Last Changed
last month

A boolean switcher with utility functions.

Demo ​

Value: OFF

Usage ​

js
import { useToggle } from '@vueuse/core'

const [value, toggle] = useToggle()

When you pass a ref, useToggle will return a simple toggle function instead:

js
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.

html
<!-- caution: $event will be pass in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />

Type Declarations ​

typescript
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>,
): [Ref<T>, (value?: T) => T]

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Anthony Fu
elky
Jelf
webfansplz
Alex Kozack
Alexey Iskhakov

Changelog ​

v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue

Released under the MIT License.