Skip to main content

Function: useToggleState()

useToggleState(initialState?): [boolean, () => void]

Defined in: use-toggle-state.ts:27

A custom React hook for toggling a boolean state.

This hook is useful for managing binary states, such as showing/hiding elements, toggling themes, or activating/deactivating features.

Parameters​

initialState?​

boolean = false

The initial state of the toggle (default is false).

Returns​

[boolean, () => void]

  • An array containing the current state and a function to toggle it.

Example​

const [isVisible, toggleVisibility] = useToggleState(false);

return (
  <div>
    <button onClick={toggleVisibility}>
      {isVisible ? "Hide" : "Show"} Content
    </button>
    {isVisible && <p>This is some toggleable content!</p>}
  </div>
);

For a live, editable example, see the useToggleState docs page.