@supunlakmal/hooks/dist/hooks/event-handling/useEventListener.js

A collection of reusable React hooks

import { useRef, useEffect } from 'react';
/**
 * Custom hook to attach an event listener to a target element (window, document, or a ref element).
 * Ensures the listener always uses the latest handler function and cleans up automatically.
 *
 * @param {string} eventName The name of the event to listen for.
 * @param {(event: Event) => void} handler The callback function to execute when the event occurs.
 * @param {EventTargetLike} [element=window] The target element. Defaults to `window`.
 * @param {boolean | AddEventListenerOptions} [options] Optional event listener options.
 */
export const useEventListener = (eventName, handler, // Use 'any' for handler event type for broader compatibility
element = window, options) => {
    const savedHandler = useRef(handler);
    useEffect(() => {
        savedHandler.current = handler;
    }, [handler]);
    useEffect(() => {
        const target = element !== null && element !== void 0 ? element : window;
        const targetElement = target && typeof target === 'object' && 'current' in target
            ? target.current
            : target;
        // Ensure targetElement is valid and supports addEventListener
        if (!targetElement ||
            typeof targetElement.addEventListener !== 'function') {
            console.warn('useEventListener: Target element does not support addEventListener.', targetElement);
            return;
        }
        const eventListener = (event) => {
            savedHandler.current(event);
        };
        // Add event listener
        targetElement.addEventListener(eventName, eventListener, options);
        // Remove event listener on cleanup
        return () => {
            targetElement.removeEventListener(eventName, eventListener, options);
        };
    }, [eventName, element, options]);
};
//# sourceMappingURL=useEventListener.js.map