-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwindow.ts
More file actions
39 lines (31 loc) · 1006 Bytes
/
window.ts
File metadata and controls
39 lines (31 loc) · 1006 Bytes
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
35
36
37
38
39
import { useCallback, useEffect, useLayoutEffect, useState } from "react";
export function useWindow(
initialWidth: number | string = "100vw",
initialHeight: number | string = "100vh",
) {
const [height, setHeight] = useState(initialWidth || "100vw");
const [width, setWidth] = useState(initialHeight || "100vh");
const canUseDOM = !!(
typeof window !== "undefined" &&
typeof window.document !== "undefined" &&
typeof window.document.createElement !== "undefined"
);
const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
useIsomorphicLayoutEffect(() => {
handleResize();
}, []);
useIsomorphicLayoutEffect(() => {
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
const handleResize = useCallback(() => {
setHeight(window.innerHeight);
setWidth(window.innerWidth);
}, [setHeight, setWidth]);
return {
width,
height,
};
}