qol-hooks/dist/esm/useEventListener.js

A collection of React hooks to improve the quality of life of developers.

import { useEffect, useRef } from "react";
/**
 * @description A hook to add an event listener to an element
 *
 * @param {keyof WindowEventMap} eventName The event name
 * @param {(event: Event) => void} handler The event handler
 * @param {HTMLElement | Window} element The element to add the event listener to
 *
 */
function useEventListener(eventName, handler, element = window) {
    const savedHandler = useRef();
    useEffect(() => {
        savedHandler.current = handler;
    }, [handler]);
    useEffect(() => {
        const isSupported = element && element.addEventListener;
        if (!isSupported)
            return;
        const eventListener = (event) => savedHandler.current(event);
        element.addEventListener(eventName, eventListener);
        return () => {
            element.removeEventListener(eventName, eventListener);
        };
    }, [eventName, element]);
}
export default useEventListener;