useToggle()
A simple abstraction to play with a boolean, don't repeat yourself.
Related hooks:
The Hook
1import { Dispatch, SetStateAction, useCallback, useState } from 'react'23function useToggle(4 defaultValue?: boolean,5): [boolean, () => void, Dispatch<SetStateAction<boolean>>] {6 const [value, setValue] = useState(!!defaultValue)78 const toggle = useCallback(() => setValue(x => !x), [])910 return [value, toggle, setValue]11}1213export default useToggle
Usage
1import { useToggle } from 'usehooks-ts'23export default function Component() {4 const [value, toggle, setValue] = useToggle()56 // Just an example to use "setValue"7 const customToggle = () => setValue((x: boolean) => !x)89 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}
See a way to make this page better?
Edit there »