@massds/mayflower-react/dist/hooks/use-window-width.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 useWindowWidth = function useWindowWidth() {
  // We use state here so that a default can be set based on window,
  // if window exists.
  var _React$useState = _react["default"].useState(null),
    windowWidth = _React$useState[0],
    setWindowWidth = _React$useState[1];
  var resize = _react["default"].useCallback(function () {
    if (window) {
      setWindowWidth(window.innerWidth);
    }
  }, [setWindowWidth]);
  _react["default"].useEffect(function () {
    // Set default windowWidth to window.innerwidth if window exists.
    if (window) {
      setWindowWidth(window.innerWidth);
      // Update windowWidth on window resize.
      window.addEventListener('resize', resize);
    }
    return function () {
      if (window) {
        // Remove resize event on unmount of component.
        window.removeEventListener('resize', resize);
      }
    };
  }, [resize, setWindowWidth]);
  return windowWidth;
};
var _default = exports["default"] = useWindowWidth;
module.exports = exports.default;