---

Custom hook that manages a boolean toggle state in React components.

Usage

import { useToggle } from 'usehooks-ts'

export default function Component() {
  const [value, toggle, setValue] = useToggle()

  // Just an example to use "setValue"
  const customToggle = () => {
    setValue((x: boolean) => !x)
  }

  return (
    <>
      <p>
        Value is <code>{value.toString()}</code>
      </p>
      <button
        onClick={() => {
          setValue(true)
        }}
      >
        set true
      </button>
      <button
        onClick={() => {
          setValue(false)
        }}
      >
        set false
      </button>
      <button onClick={toggle}>toggle</button>
      <button onClick={customToggle}>custom toggle</button>
    </>
  )
}

API

▸ useToggle(defaultValue?): [boolean, () => void, Dispatch<SetStateAction<boolean>>]

Custom hook that manages a boolean toggle state in React components.

Parameters

Returns

[boolean, () => void, Dispatch<SetStateAction<boolean>>]

A tuple containing the current state, a function to toggle the state, and a function to set the state explicitly.

Hook

import { useCallback, useState } from 'react'

import type { Dispatch, SetStateAction } from 'react'

export function useToggle(
  defaultValue?: boolean,
): [boolean, () => void, Dispatch<SetStateAction<boolean>>] {
  const [value, setValue] = useState(!!defaultValue)

  const toggle = useCallback(() => {
    setValue(x => !x)
  }, [])

  return [value, toggle, setValue]
}

---