Skip to content
On this page

useToggle

Category
Last Changed
20 days ago

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

/**
 * A boolean ref with a toggler
 *
 * @see https://vueuse.org/useToggle
 * @param [initialValue=false]
 */
export declare function useToggle(
  value: Ref<boolean>
): (value?: boolean) => boolean
export declare function useToggle(
  initialValue?: boolean
): [Ref<boolean>, (value?: boolean) => boolean]
/**
 * A boolean ref with a toggler
 *
 * @see https://vueuse.org/useToggle
 * @param [initialValue=false]
 */
export declare function useToggle(
  value: Ref<boolean>
): (value?: boolean) => boolean
export declare function useToggle(
  initialValue?: boolean
): [Ref<boolean>, (value?: boolean) => boolean]

Source

SourceDemoDocs

Contributors

Anthony Fu
webfansplz
Alex Kozack
Alexey Iskhakov

Changelog

v7.6.2 on 2/13/2022
8d190 - fix: toggle function return value (#1256)
v5.1.2 on 7/6/2021
7b9cd - fix: missing fix
v5.1.1 on 7/6/2021
47784 - fix: toggle in template regression, close #608
v5.1.0 on 7/5/2021
14f2e - fix: accept overrides for toggle function, close #585
useToggle has loaded