useToggle

A hook to toggle a boolean value with useToggle.

Install:

npm i @uidotdev/usehooks

Description:

Basically, what this hook does is that, it takes a parameter with value true or false and toggles that value to opposite. It’s useful when we want to take some action into its opposite action, for example: show and hide modal, show more/show less text, open/close side menu.

Parameters

NameTypeDescription
initialValueboolean(Optional) The initial value of the toggle state.

Return Value

The useToggle hook returns an array with the following elements:

IndexTypeDescription
0booleanThe current state of the toggle.
1functionA function to toggle the state of the toggle.

Demo:

Example:

import * as React from "react";
import { useToggle } from "@uidotdev/usehooks";

function ToggleDemo({ on, toggle }) {
  return (
    <div>
      <label className="toggle">
        <input
          onChange={toggle}
          className="toggle-checkbox"
          type="checkbox"
          checked={on}
        />
        <div className="toggle-switch"></div>
        <span className="toggle-label">{on ? "On" : "Off"}</span>
      </label>
    </div>
  );
}

export default function App() {
  const [on, toggle] = useToggle(true);

  return (
    <section>
      <h1>UseToggle</h1>
      <button disabled={on} className="link" onClick={() => toggle(true)}>
        Turn On
      </button>
      <button disabled={!on} className="link" onClick={() => toggle(false)}>
        Turn Off
      </button>
      <button className="link" onClick={toggle}>
        Toggle
      </button>
      <button className="link" onClick={() => toggle("nope")}>
        (Also toggles)
      </button>
      <ToggleDemo toggle={toggle} on={on} />
    </section>
  );
}

More Hooks:

Sort: