useBoolean

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

Import#

import { useBoolean } from "@nature-ui/core";

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.
`setState`	`(value: boolean) => void`	A function to set the boolean value to a specific value.

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.