useBoolean

Manages a boolean value with useful utility functions.

Installation

Install the custom hook from your command line.

npm i @raddix/use-boolean

Usage

In this example, we will open a menu when the cursor hovers over the button and it will close when the cursor leaves the menu container. If you click on the button, it will open/close.

import { useBoolean } from '@raddix/use-boolean';
import { Menu } from './menu'

export default function App() {
  const [open, setOpen] = useBoolean();

  return (
    <div onMouseLeave={setOpen.off}>
     <button onMouseEnter={setOpen.on} onClick={setOpen.toggle}>
       Menu
     </button>

      <Menu />
    </div>
  )
}

API

Parameters

Name	Description	Required	Default Value
initialValue	The initial value of the boolean state.	No	false

Return

The useBoolean hook returns an array with the following elements:

Index	Description
[0]	The current value of the state.
[1].on	Una función para establecer el valor booleano en true.
[1].off	Una función para establecer el valor booleano en false.
[1].toggle	Una función para negar el estado booleano.