useBoolean()
A simple abstraction to play with a boolean, don't repeat yourself.
The Hook
1import { Dispatch, SetStateAction, useCallback, useState } from 'react'23interface ReturnType {4 value: boolean5 setValue: Dispatch<SetStateAction<boolean>>6 setTrue: () => void7 setFalse: () => void8 toggle: () => void9}1011function useBoolean(defaultValue?: boolean): ReturnType {12 const [value, setValue] = useState(!!defaultValue)1314 const setTrue = useCallback(() => setValue(true), [])15 const setFalse = useCallback(() => setValue(false), [])16 const toggle = useCallback(() => setValue(x => !x), [])1718 return { value, setValue, setTrue, setFalse, toggle }19}2021export default useBoolean
Usage
1import React from 'react'23import { useBoolean } from 'usehooks-ts'45export default function Component() {6 const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false)78 // Just an example to use "setValue"9 const customToggle = () => setValue(x => !x)1011 return (12 <>13 <p>14 Value is <code>{value.toString()}</code>15 </p>16 <button onClick={setTrue}>set true</button>17 <button onClick={setFalse}>set false</button>18 <button onClick={toggle}>toggle</button>19 <button onClick={customToggle}>custom toggle</button>20 </>21 )22}
See a way to make this page better?
Edit there »