@hooooks/use-event-listener/esm/index.js

A custom React Hook that provides a declarative useEventListener with native event binding.

import { useRef, useEffect } from 'react';
import { findDOMNode } from 'react-dom';
export default function useEventListener(element, eventName, handler, options) {
    var savedhandler = useRef();
    useEffect(function () {
        savedhandler.current = handler;
    }, [handler]);
    useEffect(function () {
        var eventListener = function (event) { return savedhandler.current(event); };
        var ele = getTargetElement(element);
        if (ele != null) {
            return addEventListener(ele, eventName, eventListener, options);
        }
        return undefined;
    });
}
export function addEventListener(element, eventName, handler, options) {
    if (options === void 0) { options = false; }
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, options);
    }
    else if (element.attachEvent) {
        element.attachEvent("on".concat(eventName), handler);
    }
    else {
        element["on".concat(eventName)] = handler;
    }
    return function () {
        removeEventListener(element, eventName, handler, options);
    };
}
export function removeEventListener(element, eventName, handler, options) {
    if (options === void 0) { options = false; }
    if (element.removeEventListener) {
        element.removeEventListener(eventName, handler, options);
    }
    else if (element.attachEvent) {
        element.detachEvent("on".concat(eventName), handler);
    }
    else {
        element["on".concat(eventName)] = null;
    }
}
export function getTargetElement(element) {
    if (isHtmlControl(element)) {
        return element;
    }
    var ele = element.current;
    if (isHtmlControl(ele)) {
        return ele;
    }
    ele = findDOMNode(ele);
    if (isHtmlControl(ele)) {
        return ele;
    }
    return null;
}
function isHtmlControl(obj) {
    if (obj === window || obj === document) {
        return true;
    }
    var div = document.createElement("div");
    try {
        div.appendChild(obj.cloneNode(true));
        return +obj.nodeType === 1;
    }
    catch (e) {
        return false;
    }
}