Guide
Reference
Roadmap
Guide
Reference
Roadmap

useBoolean

Tags:
State
This Hook is available since v1.3.0.

A React Hook for managing boolean state.

Tip

If you need to manage the alternating states of multiple values (such as toggling between multiple languages, themes, etc.), it is recommended to use useCircularList.

Scenes

  • Controlling element visibility: For toggling the visibility of page elements like dialogs and dropdown menus
  • Form toggle inputs: Manages the state of toggle-type inputs (e.g., checkboxes) in forms
  • ...

Demo

Source
Boolean Value:
true
Circular List:
A, B, C, D, E, F
Circular Value:
A

Usage

const [bool, actions] = useBoolean(false);

actions.toggle();
actions.setTrue();
actions.setFalse();

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const [bool, actions] = useBoolean(initialBool)

InitialBool

Represents the initial boolean value of the state.

Returns

export type UseBooleanActions = {
  /**
   * Sets the boolean state to `true`.
   */
  setTrue: () => void
  /**
   * Sets the boolean state to `false`.
   */
  setFalse: () => void
  /**
   * Sets the boolean state to the given value.
   */
  setState: ReactSetState<boolean>
  /**
   * Toggles the boolean state.
   */
  toggle: () => void
}

export type UseBooleanReturns = readonly [value: boolean, UseBooleanActions]