useToggle

Replace the useState togglers by using this custom hook that handles any toggle state for you.

Install

npm

npm i use-any-hook

Description

The useToggle hook provides an easy way to manage boolean toggle states in your React application. It simplifies managing toggle logic by replacing manual useState togglers with a more reusable and concise API.

Parameters

Name	Type	Default	Description
initialValue	boolean	false	The initial value of the toggle state.

Return Values

Name	Type	Description
state	boolean	The current boolean state of the toggle.
toggle	function	A function to toggle the current state (true or false).
setExplicit	function	A function to explicitly set the state to true or false.

Example

useToggle.example.tsx

import React from "react";
import { useToggle } from "use-any-hook";

function ExampleComponent() {
  const [isOn, toggle, setIsOn] = useToggle();

  return (
    <div>
      <p>State is: {isOn ? "ON" : "OFF"}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={() => setIsOn(true)}>Turn ON</button>
      <button onClick={() => setIsOn(false)}>Turn OFF</button>
    </div>
  );
}