useToggle

State & data

A lightweight, type-safe React hook for boolean state management

Install

$ npm install @usefy/use-toggle

Quick start

useToggle.tsx

import { useToggle } from "@usefy/use-toggle";

function Modal() {
  const { value: isOpen, toggle, setTrue, setFalse } = useToggle(false);

  return (
    <>
      <button onClick={setTrue}>Open Modal</button>
      {isOpen && (
        <div className="modal">
          <h2>Modal Content</h2>
          <button onClick={setFalse}>Close</button>
        </div>
      )}
    </>
  );
}

API reference

`useToggle(initialValue?)`

A hook that manages boolean state with toggle, setTrue, setFalse, and setValue functions.

Parameters

Parameter	Type	Default	Description
`initialValue`	`boolean`	`false`	The initial boolean value

Returns `UseToggleReturn`

Property	Type	Description
`value`	`boolean`	The current boolean state
`toggle`	`() => void`	Toggles the value (true ↔ false)
`setTrue`	`() => void`	Sets the value to `true`
`setFalse`	`() => void`	Sets the value to `false`
`setValue`	`(value: boolean) => void`	Sets the value to a specific boolean

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →