useToggle


A simple abstraction to play with a boolean, don't repeat yourself.

Related hooks:

Usage

import { useToggle } from 'reactchemy'

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>
    </>
   )
}

Hook

import type { Dispatch, SetStateAction } from 'react'
import { useCallback, useState } 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]
}