useEventListener - Adicione declarativamente listeners de eventos com limpeza automática

import { useEffect, useRef } from "react";
 
/**
 * useEventListener
 * Adiciona um listener de evento à janela, documento ou qualquer ref de elemento.
 * Usa o padrão de callback ref mais recente para evitar reassinaturas em
 * mudanças de callback. Limpa automaticamente ao desmontar.
 */
 
// Sobrecarga: eventos de janela
function useEventListener<K extends keyof WindowEventMap>(
  eventName: K,
  handler: (event: WindowEventMap[K]) => void,
  element?: undefined,
  options?: boolean | AddEventListenerOptions
): void;
 
// Sobrecarga: eventos de documento
function useEventListener<K extends keyof DocumentEventMap>(
  eventName: K,
  handler: (event: DocumentEventMap[K]) => void,
  element: Document,
  options?: boolean | AddEventListenerOptions
): void;
 
// Sobrecarga: eventos de elemento HTML
function useEventListener<
  K extends keyof HTMLElementEventMap,
  T extends HTMLElement = HTMLDivElement
>(
  eventName: K,
  handler: (event: HTMLElementEventMap[K]) => void,
  element: React.RefObject<T | null>,
  options?: boolean | AddEventListenerOptions
): void;
 
// Implementação
function useEventListener(
  eventName: string,
  handler: (event: Event) => void,
  element?: Document | React.RefObject<HTMLElement | null>,
  options?: boolean | AddEventListenerOptions
): void {
  const handlerRef = useRef(handler);
 
  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);
 
  useEffect(() => {
    // Determina o elemento de destino
    let targetElement: EventTarget;
 
    if (element === undefined) {
      // Padrão para window
      if (typeof window === "undefined") return;
      targetElement = window;
    } else if (element instanceof Document) {
      targetElement = element;
    } else {
      // É uma ref
      if (!element.current) return;
      targetElement = element.current;
    }
 
    const listener = (event: Event) => handlerRef.current(event);
 
    targetElement.addEventListener(eventName, listener, options);
 
    return () => {
      targetElement.removeEventListener(eventName, listener, options);
    };
  }, [eventName, element, options]);
}

"use client";
 
import { useState, useRef } from "react";
 
// Rastreia o status online/offline
function OnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
 
  useEventListener("online", () => setIsOnline(true));
  useEventListener("offline", () => setIsOnline(false));
 
  return (
    <div
      style={{
        padding: 8,
        background: isOnline ? "#dcfce7" : "#fee2e2",
        borderRadius: 4,
      }}
    >
      {isOnline ? "Online" : "Offline"}
    </div>
  );
}
 
// Rastreia a posição do mouse em um elemento
function MouseTracker() {
  const ref = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
 
  useEventListener(
    "mousemove",
    (event) => {
      const rect = ref.current?.getBoundingClientRect();
      if (rect) {
        setPosition({
          x: event.clientX - rect.left,
          y: event.clientY - rect.top,
        });
      }
    },
    ref
  );
 
  return (
    <div
      ref={ref}
      style={{
        width: 300,
        height: 200,
        background: "#f5f5f5",
        border: "1px solid #ccc",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        cursor: "crosshair",
      }}
    >
      x: {position.x}, y: {position.y}
    </div>
  );
}
 
// Eventos de teclado no documento
function KeyLogger() {
  const [lastKey, setLastKey] = useState("");
 
  useEventListener(
    "keydown",
    (event) => {
      setLastKey(event.key);
    },
    document
  );
 
  return <p>Última tecla pressionada: {lastKey || "nenhuma"}</p>;
}
 
// Scroll com opção passive
function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
 
  useEventListener(
    "scroll",
    () => setScrollY(window.scrollY),
    undefined,
    { passive: true }
  );
 
  return (
    <div style={{ position: "fixed", top: 0, right: 0, padding: 8 }}>
      Scroll: {scrollY}px
    </div>
  );
}

function useEventListener(eventName, handler, element) {
  // ...mesma configuração...
  const removeRef = useRef<(() => void) | null>(null);
 
  useEffect(() => {
    // ...mesma lógica...
    removeRef.current = () => {
      targetElement.removeEventListener(eventName, listener, options);
    };
    return removeRef.current;
  }, [eventName, element, options]);
 
  return { remove: () => removeRef.current?.() };
}

// Isso é essencialmente o que useMediaQuery faz internamente
const mql = window.matchMedia("(max-width: 768px)");
useEventListener("change", (e) => setIsMobile(e.matches), { current: mql } as any);

useEventListener("my-custom-event", (event) => {
  console.log((event as CustomEvent).detail);
});