@wulperstudio/cms/node/hooks/useEventListener.js

Wulper Studio Library Components CMS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useEventListener = useEventListener;
var _react = require("react");
var _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
/* eslint-disable no-undef */
/* eslint-disable consistent-return */
/* eslint-disable no-redeclare */

function useEventListener(eventName, handler, element) {
  // Create a ref that stores handler
  var savedHandler = (0, _react.useRef)(handler);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    savedHandler.current = handler;
  }, [handler]);
  (0, _react.useEffect)(function () {
    // Define the listening target
    var targetElement = (element == null ? void 0 : element.current) || window;
    if (!(targetElement && targetElement.addEventListener)) {
      return;
    }

    // Create event listener that calls handler function stored in ref
    var eventListener = function eventListener(event) {
      return savedHandler.current(event);
    };
    targetElement.addEventListener(eventName, eventListener);

    // Remove event listener on cleanup
    return function () {
      targetElement.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}