useToggle

Hook for toggling boolean values.

Import

import { useToggle } from "amvasdev-ui";

Signature

useToggle(initialValue): [boolean, () => void]

Parameters

Name	Type	Required	Description
initialValue	boolean	No	Initial boolean value (default: false)

Returns

[boolean, () => void]

Tuple containing the current value and toggle function

Live Demo

Visibility Toggle

Enable/Disable Toggle

Status: Enabled

Dark Mode Toggle

Current theme: Light

Examples

Basic Toggle

import { useToggle } from "amvasdev-ui";

function ToggleExample() {
  const [isVisible, toggleVisibility] = useToggle(false);
  const [isEnabled, toggleEnabled] = useToggle(true);

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? "Hide" : "Show"}
      </button>
      <button onClick={toggleEnabled}>
        {isEnabled ? "Disable" : "Enable"}
      </button>

      {isVisible && <p>This content is visible</p>}
    </div>
  );
}

Sidebar Toggle

import { useToggle } from "amvasdev-ui";

function Sidebar() {
  const [isOpen, toggleSidebar] = useToggle(false);

  return (
    <>
      <button onClick={toggleSidebar}>Toggle Sidebar</button>

      <aside className={isOpen ? "open" : "closed"}>
        <nav>
          <a href="/home">Home</a>
          <a href="/about">About</a>
        </nav>
      </aside>
    </>
  );
}

Dark Mode Toggle

import { useToggle } from "amvasdev-ui";

function DarkModeToggle() {
  const [isDark, toggleDarkMode] = useToggle(false);

  return (
    <button onClick={toggleDarkMode}>
      {isDark ? "🌙 Dark" : "☀️ Light"}
    </button>
  );
}