useEventListener.ts

import { useEffect, useRef, useState } from "react";

export function useEventListener<K extends keyof HTMLElementEventMap>(
  eventName: K,
  handler: (event: HTMLElementEventMap[K]) => void,
  element: HTMLElement | Window = window
) {
  const savedHandler = useRef<(event: HTMLElementEventMap[K]) => void>();

  useEffect(() => savedHandler.current = handler, [handler]);

  useEffect(() => {
    if (!element || !element.addEventListener) return;
    
    const eventListener = (event: Event) => {
      if (savedHandler.current)
        savedHandler.current(event as HTMLElementEventMap[K]);
    };
    
    element.addEventListener(eventName, eventListener);
    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}