@massds/mayflower-react/dist/hooks/use-event-listener.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var useEventListener = function useEventListener(eventName, handler, element) {
  // Create a ref that stores handler.
  var savedHandler = _react["default"].useRef();
  var savedEventName = _react["default"].useRef();
  // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler ...
  // ... without us needing to pass it in effect deps array ...
  // ... and potentially cause effect to re-run every render.
  _react["default"].useEffect(function () {
    savedHandler.current = handler;
  }, [handler]);
  _react["default"].useEffect(function () {
    savedEventName.current = eventName;
  }, [eventName]);
  _react["default"].useEffect(function () {
    // Make sure element supports addEventListener.
    var elementRef = element;
    var isSupported = elementRef && elementRef.addEventListener;
    if (!isSupported) {
      return;
    }
    // Create event listener that calls handler function stored in ref.
    var eventListener = function eventListener(event) {
      return savedHandler.current(event);
    };
    // Add event listener.
    elementRef.addEventListener(savedEventName.current, eventListener);
    // Remove event listener on cleanup.
    // eslint-disable-next-line consistent-return
    return function () {
      if (elementRef) {
        elementRef.removeEventListener(savedEventName.current, eventListener);
      }
    };
  }, [element]);
};
var _default = exports["default"] = useEventListener;
module.exports = exports.default;