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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTargetElement = exports.removeEventListener = exports.addEventListener = void 0;
var react_1 = require("react");
var react_dom_1 = require("react-dom");
function useEventListener(element, eventName, handler, options) {
    var savedhandler = (0, react_1.useRef)();
    (0, react_1.useEffect)(function () {
        savedhandler.current = handler;
    }, [handler]);
    (0, react_1.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;
    });
}
exports.default = useEventListener;
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);
    };
}
exports.addEventListener = addEventListener;
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;
    }
}
exports.removeEventListener = removeEventListener;
function getTargetElement(element) {
    if (isHtmlControl(element)) {
        return element;
    }
    var ele = element.current;
    if (isHtmlControl(ele)) {
        return ele;
    }
    ele = (0, react_dom_1.findDOMNode)(ele);
    if (isHtmlControl(ele)) {
        return ele;
    }
    return null;
}
exports.getTargetElement = getTargetElement;
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;
    }
}