UseEventListener

1'use client';
2 
3import { RefObject, useEffect, useRef } from 'react';
4 
5// Types
6type EventTarget = Window | Document | HTMLElement | null;
7 
8interface Props<
9  K extends keyof WindowEventMap,
10  T extends HTMLElement = HTMLElement,
11> {
12  eventName: K;
13  handler: (event: WindowEventMap[K]) => void;
14  element?: RefObject<T | null> | EventTarget;
15  options?: boolean | AddEventListenerOptions;
16}
17 
18/**
19 * React hook for handling DOM event listeners with proper cleanup
20 */
21export function useEventListener<
22  K extends keyof WindowEventMap,
23  T extends HTMLElement = HTMLElement,
24>({ eventName, handler, element = window, options }: Props<K, T>): void {
25  // Create a ref that stores the handler
26  const savedHandler = useRef(handler);
27 
28  // Update ref.current value if handler changes
29  useEffect(() => {
30    savedHandler.current = handler;
31  }, [handler]);
32 
33  useEffect(() => {
34    // Define the element to attach the listener to
35    const targetElement: EventTarget =
36      element && 'current' in element ? element.current : element;
37 
38    if (!(targetElement && targetElement.addEventListener)) {
39      return;
40    }
41 
42    // Create event listener that calls handler function stored in ref
43    const eventListener: typeof handler = (event) =>
44      savedHandler.current(event);
45 
46    targetElement.addEventListener(
47      eventName,
48      eventListener as EventListener,
49      options,
50    );
51 
52    // Remove event listener on cleanup
53    return () => {
54      targetElement.removeEventListener(
55        eventName,
56        eventListener as EventListener,
57        options,
58      );
59    };
60  }, [eventName, element, options]);
61}