@e-group/hooks/esm/useResizeWindow.js

eGroup team react-hooks that share across projects.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useState, useEffect } from 'react';
const isBrowser = typeof window !== 'undefined';
/**
 * Get window innerWidth and innerHeight when it resize.
 */

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

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

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

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