packages/components/hooks/useWindowSize.ts

   1 import { useEffect, useState } from 'react';
   2
   3 import debounce from '@proton/utils/debounce';
   4
   5 const getWindowSize = (): [width: number, height: number] => {
   6     return [window.innerWidth, window.innerHeight];
   7 };
   8
   9 const useWindowSize = () => {
  10     const [windowSize, setWindowSize] = useState(() => getWindowSize());
  11
  12     useEffect(() => {
  13         const reducer = (oldValue: [number, number], newValue: [number, number]) => {
  14             if (oldValue[0] === newValue[0] && oldValue[1] === newValue[1]) {
  15                 return oldValue;
  16             }
  17             return newValue;
  18         };
  19
  20         const onResize = debounce(() => {
  21             setWindowSize((old) => reducer(old, getWindowSize()));
  22         }, 100);
  23
  24         window.addEventListener('resize', onResize);
  25         setWindowSize((old) => reducer(old, getWindowSize()));
  26         return () => {
  27             window.removeEventListener('resize', onResize);
  28         };
  29     }, []);
  30
  31     return windowSize;
  32 };
  33
  34 export default useWindowSize;