Blife UI

¿Qué hace?

Simplifica el manejo de valores booleanos. Retorna el valor actual y una función que puede invertirlo o establecerlo directamente.

Importación

import { useToggle } from "@blifedesarrollo/hooks";

Uso básico

function ToggleButton() {
  const [isOn, toggle] = useToggle(false);
 
  return <button onClick={toggle}>{isOn ? "Apagar" : "Encender"}</button>;
}

Cómo funciona:

toggle() → Invierte el valor (true → false, false → true)
toggle(true) → Establece el valor a true
toggle(false) → Establece el valor a false

Ejemplos comunes

Menú de navegación

function MobileMenu() {
  const [isMenuOpen, toggleMenu] = useToggle(false);
 
  return (
    <nav>
      <button onClick={toggleMenu} aria-expanded={isMenuOpen}>
        ☰ Menú
      </button>
 
      {isMenuOpen && (
        <ul>
          <li>
            <a href="/" onClick={() => toggleMenu(false)}>
              Inicio
            </a>
          </li>
          <li>
            <a href="/about" onClick={() => toggleMenu(false)}>
              Acerca
            </a>
          </li>
        </ul>
      )}
    </nav>
  );
}

function App() {
  const [isOpen, toggleModal] = useToggle(false);
 
  return (
    <div>
      <button onClick={toggleModal}>Abrir modal</button>
 
      {isOpen && (
        <Modal onClose={() => toggleModal(false)}>
          <p>Contenido del modal</p>
        </Modal>
      )}
    </div>
  );
}

Checkbox personalizado

function CustomCheckbox() {
  const [checked, toggleChecked] = useToggle(false);
 
  return (
    <div onClick={toggleChecked}>
      <input type="checkbox" checked={checked} readOnly />
      <span>{checked ? "Marcado" : "Sin marcar"}</span>
    </div>
  );
}

Establecer valor específico

function Form() {
  const [isSubmitting, toggleSubmitting] = useToggle(false);
 
  const handleSubmit = async () => {
    toggleSubmitting(true); // ← Establece a true
    try {
      await submitForm();
    } finally {
      toggleSubmitting(false); // ← Establece a false
    }
  };
 
  return (
    <button onClick={handleSubmit} disabled={isSubmitting}>
      {isSubmitting ? "Enviando..." : "Enviar"}
    </button>
  );
}

API

Parámetros

Parámetro	Tipo	Descripción
`initialValue`	`boolean \| any`	Valor inicial (se convierte a boolean si no lo es)

Retorno

Retorna un array con dos elementos:

const [value, toggle] = useToggle(initialValue);

Elemento	Tipo	Descripción
`value`	`boolean`	Valor actual del toggle
`toggle`	`(value?: boolean) => void`	Función para cambiar el valor

use-toggle