openstatus.dev
Openstatus
www.openstatus.dev
1// CREDITS: https://github.com/steven-tey/precedent/blob/main/lib/hooks/use-window-size.ts
2import { useEffect, useState } from "react";
3
4export default function useWindowSize() {
5 const [windowSize, setWindowSize] = useState<{
6 width: number | undefined;
7 height: number | undefined;
8 }>({
9 width: undefined,
10 height: undefined,
11 });
12
13 useEffect(() => {
14 // Handler to call on window resize
15 function handleResize() {
16 // Set window width/height to state
17 setWindowSize({
18 width: window.innerWidth,
19 height: window.innerHeight,
20 });
21 }
22
23 // Add event listener
24 window.addEventListener("resize", handleResize);
25
26 // Call handler right away so state gets updated with initial window size
27 handleResize();
28
29 // Remove event listener on cleanup
30 return () => window.removeEventListener("resize", handleResize);
31 }, []); // Empty array ensures that effect is only run on mount
32
33 return {
34 windowSize,
35 isMobile: typeof windowSize?.width === "number" && windowSize?.width < 640,
36 isTablet:
37 typeof windowSize?.width === "number" &&
38 windowSize?.width >= 640 &&
39 windowSize?.width < 1024,
40 isDesktop:
41 typeof windowSize?.width === "number" && windowSize?.width >= 1024,
42 };
43}