@spaced-out/ui-design-system/lib/hooks/useWindowSize/useWindowSize.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useWindowSize = useWindowSize;
var _react = require("react");
var _lodash = require("lodash");
const THROTTLE_DURATION = 200;
function useWindowSize() {
  const [windowSize, setWindowSize] = (0, _react.useState)({
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
    height: typeof window !== 'undefined' ? window.innerHeight : 0
  });
  (0, _react.useEffect)(() => {
    const updateSize = (0, _lodash.throttle)(() => {
      const {
        innerWidth,
        innerHeight
      } = window;
      setWindowSize(prevSize => {
        if (prevSize.width !== innerWidth || prevSize.height !== innerHeight) {
          return {
            width: innerWidth,
            height: innerHeight
          };
        }
        return prevSize;
      });
    }, THROTTLE_DURATION);
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => {
      window.removeEventListener('resize', updateSize);
      updateSize.cancel();
    };
  }, []);
  return windowSize;
}