useToggle()

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

Related hooks:

The Hook

1import { Dispatch, SetStateAction, useCallback, useState } from 'react'
2
3function useToggle(
4 defaultValue?: boolean,
5): [boolean, () => void, Dispatch<SetStateAction<boolean>>] {
6 const [value, setValue] = useState(!!defaultValue)
7
8 const toggle = useCallback(() => setValue(x => !x), [])
9
10 return [value, toggle, setValue]
11}
12
13export default useToggle

Usage

1import { useToggle } from 'usehooks-ts'
2
3export default function Component() {
4 const [value, toggle, setValue] = useToggle()
5
6 // Just an example to use "setValue"
7 const customToggle = () => setValue((x: boolean) => !x)
8
9 return (
10 <>
11 <p>
12 Value is <code>{value.toString()}</code>
13 </p>
14 <button onClick={() => setValue(true)}>set true</button>
15 <button onClick={() => setValue(false)}>set false</button>
16 <button onClick={toggle}>toggle</button>
17 <button onClick={customToggle}>custom toggle</button>
18 </>
19 )
20}

Edit on CodeSandbox

See a way to make this page better?
Edit there »