useBooleanState

Introduction

is a custom React hook designed to provide an easy to use interface for managing boolean states in your components. It not only allows you to get the current state and set a new state but also offers handy utility functions to directly set the state to true or false, or to toggle the state.

Why useBooleanState

Managing boolean state values can be a common task in React applications, and this hook provides an easy way to handle it in a consistent and reusable way.

Installation

To use useBooleanState in your project, you can install it from npm:

npm install --dev '@pillar-ui/hooks'

Usage

const { booleanValue, setTrue, setFalse, setToggle } = useBooleanState(true)

Examples

Here's an example of how you can use useBooleanState in a functional component:

import { useBooleanState } from 'path-to-useBooleanState'

function BooleanComponent() {
  const { booleanValue, setTrue, setFalse, setToggle } = useBooleanState(true)

  return (
    <div>
      <p>Boolean Value: {booleanValue ? 'True' : 'False'}</p>
      <button onClick={setTrue}>Set True</button>
      <button onClick={setFalse}>Set False</button>
      <button onClick={setToggle}>Toggle</button>
    </div>
  )
}

Use Case

Toggling a menu or modal: You can use useBooleanState to manage the state of a menu or modal that is toggled by a button click.
Managing the state of a checkbox or toggle switch: If you have a checkbox or toggle switch in your UI, you can use useBooleanState to manage its state.
Controlling the visibility of an element: You can use useBooleanState to manage the visibility of an element based on a boolean value. For example, you could use it to show or hide a tooltip when a user hovers over an element.
Conditional rendering: You can use useBooleanState to conditionally render components based on a boolean value. For example, you could use it to conditionally render a "Save" button only when a form has been edited.
Managing the state of a feature flag: If you have a feature flag in your application that determines whether a certain feature is enabled or not, you can use useBooleanState to manage the state of the flag. This allows you to easily toggle the feature on and off as needed.

Implementation details

The useBooleanState hook uses the useState and useCallback hooks from the React library to manage the boolean state value and update functions respectively.

API Reference

useBooleanState takes a single optional argument:

defaultValue: boolean (optional): The initial state of the boolean. Default is false.

And returns an object with the following keys:

booleanValue: boolean: The current boolean state.
setBooleanValue: function: A setter function to update the boolean state.
setTrue: function: A function to set the boolean state to true.
setFalse: function: A function to set the boolean state to false.
setToggle: function: A function to toggle the boolean state.

TypeScript Support

This hook is written in TypeScript and provides type definitions for its usage

FAQs

Q: Can I use useBooleanState in a class component?

Answer: useBooleanState, like all hooks, can only be used in functional components, not class components. Hooks are a feature introduced in React 16.8 that lets you use state and other React features without writing a class.

Q: What is the advantage of using useBooleanState over traditional useState?

Answer: useBooleanState provides an abstraction over the useState hook and comes bundled with utility functions (setTrue, setFalse, setToggle) that directly set the boolean state to desired values. This not only makes your code simpler and more intuitive but also helps reduce the size of your code by eliminating the need for additional logic to handle boolean state changes.

Q: Are the utility functions (setTrue, setFalse, setToggle) always the same between renders?

Answer: Yes, the useCallback hook is used to memoize these functions, which ensures they have a stable identity across renders unless their dependencies change.

Troubleshooting

If you encounter any issues using the useBooleanState hook, please refer to the documentation or open an issue on the project's GitHub repository.

Conclusion

The useDarkMode custom hook is a useful tool for adding dark mode functionality to your React application. By using this hook, you can make your app more accessible and improve the user experience for your users.

useBooleanState documentation