ahooks/es/useEventListener/index.js

react hooks library

import useLatest from '../useLatest';
import { getTargetElement } from '../utils/domTarget';
import useEffectWithTarget from '../utils/useEffectWithTarget';
function useEventListener(eventName, handler, options = {}) {
    const { enable = true } = options;
    const handlerRef = useLatest(handler);
    useEffectWithTarget(() => {
        if (!enable) {
            return;
        }
        const targetElement = getTargetElement(options.target, window);
        if (!(targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener)) {
            return;
        }
        const eventListener = (event) => {
            return handlerRef.current(event);
        };
        const eventNameArray = Array.isArray(eventName) ? eventName : [eventName];
        eventNameArray.forEach((event) => {
            targetElement.addEventListener(event, eventListener, {
                capture: options.capture,
                once: options.once,
                passive: options.passive,
            });
        });
        return () => {
            eventNameArray.forEach((event) => {
                targetElement.removeEventListener(event, eventListener, {
                    capture: options.capture,
                });
            });
        };
    }, [eventName, options.capture, options.once, options.passive, enable], options.target);
}
export default useEventListener;