Skip to content
On this page

useToggle

Category
Export Size
285 B
Last Changed
6 months ago

A boolean switcher with utility functions.

Demo

Value: OFF

Usage

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

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

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()" />
<!-- 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?: MaybeComputedRef<Truthy>
  falsyValue?: MaybeComputedRef<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?: MaybeComputedRef<Truthy>
  falsyValue?: MaybeComputedRef<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

SourceDemoDocs

Contributors

Anthony Fu
elky
Jelf
webfansplz
Alex Kozack
Alexey Iskhakov

Changelog

v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.4.0 on 5/3/2022
7aaeb - feat: new options (#1523)
v7.6.2 on 2/13/2022
8d190 - fix: toggle function return value (#1256)

Released under the MIT License.