useEventListener — Typed Wrapper

import { useEffect, useRef, RefObject } from 'react';

export function useEventListener<K extends keyof WindowEventMap>(
  type: K,
  handler: (event: WindowEventMap[K]) => void,
  element?: undefined | null,
): void;
export function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement>(
  type: K,
  handler: (event: HTMLElementEventMap[K]) => void,
  element: RefObject<T>,
): void;
export function useEventListener(type: string, handler: (e: Event) => void, element?: any): void {
  const saved = useRef(handler);
  useEffect(() => { saved.current = handler; }, [handler]);

  useEffect(() => {
    const target = element?.current ?? window;
    if (!target?.addEventListener) return;
    const listener: EventListener = (e) => saved.current(e);
    target.addEventListener(type, listener);
    return () => target.removeEventListener(type, listener);
  }, [type, element]);
}

useEventListener('keydown', e => { if (e.key === 'Escape') closeAll(); });