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:

Name	Type	Description
`on`	`() => void`	A function to set the boolean value to `true`.
`off`	`() => void`	A function to set the boolean value to `false`.
`toggle`	`() => void`	A 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.

Import​

Return value​

Usage​

Usage of toggle method​

Usage of on and off methods​

Parameters​