@e-group/hooks/useResizeWindow.js

eGroup team react-hooks that share across projects.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useResizeWindow;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

const isBrowser = typeof window !== 'undefined';
/**
 * Get window innerWidth and innerHeight when it resize.
 */

function useResizeWindow() {
  const _useState = (0, _react.useState)(isBrowser ? window.innerWidth : 0),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        width = _useState2[0],
        setWidth = _useState2[1];

  const _useState3 = (0, _react.useState)(isBrowser ? window.innerHeight : 0),
        _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
        height = _useState4[0],
        setHeight = _useState4[1];

  (0, _react.useEffect)(() => {
    const resizer = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };

    window.addEventListener('resize', resizer);
    return () => {
      window.removeEventListener('resize', resizer);
    };
  }, []);
  return [width, height];
}