apps/web/src/hooks/useViewport.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { useState, useEffect } from "react";

function getViewport() {
  try {
    const { innerWidth: width, innerHeight: height } = window ?? {
      innerWidth: 0,
      innerHeight: 0,
    };
    return {
      width,
      height,
    };
  } catch {
    return {
      width: 0,
      height: 0,
    };
  }
}

export default function useViewport() {
  const [viewport, setViewport] = useState(getViewport());

  useEffect(() => {
    function handleResize() {
      setViewport(getViewport());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return viewport;
}