useBoolean

useBoolean is a custom hook used to manage a boolean value with on, off and toggle functions.

Import#

import { useBoolean } from "@chakra-ui/react"

Return value#

The useBoolean hook returns a stateful boolean value and an object with the following function to update it:

NameTypeDescription
on() => voidA function to set the boolean value to true.
off() => voidA function to set the boolean value to false.
toggle() => voidA function to negate the boolean state.

Usage#

Usage of toggle method#

function Example() {
const [flag, setFlag] = useBoolean()
return (
<>
<p>Boolean state: {flag.toString()}</p>
<button onClick={setFlag.toggle}>
Click me to toggle the boolean value
</button>
</>
)
}

Usage of on and off methods#

function Example() {
const [flag, setFlag] = useBoolean()
return (
<div onMouseEnter={setFlag.on} onMouseLeave={setFlag.off}>
{flag ? 'The flag is ON!' : 'Hover me to turn ON'}
</div>
)
}

Parameters#

The hook useBoolean accepts the initial boolean value, by default is false.

Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel