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#

Boolean state: false

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>
    </>
  )
}

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>
    </>
  )
}

Editable Example

Usage of on and off methods#

Hover me to turn ON

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>
  )
}

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>
  )
}

Editable Example

Parameters#

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

Edit this page