Descripción del Proyecto

Cada proyecto React en el que trabajo termina necesitando las mismas utilidades: debouncing, sincronización con local storage, detección de clic fuera, media queries y más. En lugar de copiar código entre proyectos o instalar múltiples paquetes pequeños, creé un repositorio centralizado de hooks que puedo reutilizar en todos lados.

Esta librería es mi toolkit personal que he refinado a través de múltiples proyectos, asegurando que cada hook esté bien testeado, correctamente tipado y siga las mejores prácticas de React.

Características

• Más de 20 hooks cubriendo casos de uso comunes
• Cero dependencias - solo React como peer dependency
• Soporte completo de TypeScript con inferencia de tipos apropiada
• Tree-shakeable - solo importás lo que necesitás
• Compatible con SSR - seguro para Next.js y otros frameworks SSR
• Completamente testeado con cobertura de tests completa

Instalación

npm install @qazuor/react-hooks
# o
pnpm add @qazuor/react-hooks
# o
yarn add @qazuor/react-hooks

Hooks Disponibles

Gestión de Estado

• useBoolean - Estado booleano con métodos setTrue, setFalse, toggle
• useToggle - Estado toggleable con persistencia opcional
• useQueue - Cola FIFO con operaciones enqueue, dequeue

Efectos Secundarios

• useTimeout - Ejecución retrasada de callback con start, stop, reset
• useInterval - Callbacks recurrentes con funcionalidad de pausa/reanudación
• useHandledInterval - Intervalo mejorado con soporte de delay aleatorio
• useDebounce - Debouncing de valores con delay configurable

APIs del Navegador

• useLocalStorage - Estado persistente sincronizado con localStorage
• useSessionStorage - Gestión de almacenamiento de sesión
• useCopyToClipboard - Utilidades de lectura/escritura del portapapeles
• useMediaQuery - Matching reactivo de media queries
• useNetworkState - Detección de conectividad de red
• useVisibilityChange - Monitoreo de visibilidad del documento
• useWindowWidth - Tracking de dimensiones de ventana

Interacción del Usuario

• useClickOutside - Detectar clics fuera de un elemento
• useIdleness - Monitorear actividad/inactividad del usuario
• usePageLeave - Detectar cuando el usuario abandona la página
• useLockBodyScroll - Prevenir scroll del body (modales, overlays)
• useMeasure - Dimensiones de elementos via ResizeObserver

Desarrollo

• useLogger - Logging de desarrollo con tracking de ciclo de vida

Ejemplo de Uso

import {
  useLocalStorage,
  useDebounce,
  useClickOutside,
} from '@qazuor/react-hooks';

function SearchDropdown() {
  const [query, setQuery] = useLocalStorage('search-query', '');
  const debouncedQuery = useDebounce(query, 300);
  const dropdownRef = useClickOutside<HTMLDivElement>(() => {
    setIsOpen(false);
  });

  useEffect(() => {
    if (debouncedQuery) {
      fetchResults(debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <div ref={dropdownRef}>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      {/* Dropdown de resultados */}
    </div>
  );
}

Detalles Técnicos

Requisitos

• React 18.2+
• TypeScript 4.9+ (para usuarios de TypeScript)

Tamaño del Bundle

Cada hook es importable independientemente, así que solo incluís en el bundle lo que usás. La librería entera está bajo 5KB gzipped.

Hooks Futuros

Planeando agregar:

• usePrevious - Trackear valor previo
• useAsync - Gestión de estado de operaciones async
• useIntersectionObserver - Detección de visibilidad en viewport
• useGeolocation - API de geolocalización del navegador
• useEventListener - Gestión simplificada de event listeners