Notehooks

useToggle

A simple boolean state hook for toggling values.

useToggle

A hook that provides an easy way to toggle a boolean state value. Useful for managing UI states like modals, dropdowns, and visibility toggles.

Usage

import { useToggle } from "notehooks";

const MyComponent = () => {
  const [isOpen, toggle] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>{isOpen ? "Hide" : "Show"}</button>
      {isOpen && <p>This is now visible!</p>}
    </div>
  );
};

API

useToggle(initialValue?)

ParameterTypeDefaultDescription
initialValuebooleanfalseThe initial boolean state value.

Returns

NameTypeDescription
statebooleanThe current toggle state.
toggle() => voidFunction to toggle the state.

Example with setValue

const [isOpen, toggle, setValue] = useToggle(false);

// Toggle
toggle(); // isOpen becomes true

// Set to specific value
setValue(false); // isOpen becomes false