1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import {useEffect, useState} from 'react';
|
14 | import {useIsSSR} from '@react-aria/ssr';
|
15 |
|
16 | interface ViewportSize {
|
17 | width: number,
|
18 | height: number
|
19 | }
|
20 |
|
21 |
|
22 | let visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
23 |
|
24 | export function useViewportSize(): ViewportSize {
|
25 | let isSSR = useIsSSR();
|
26 | let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());
|
27 |
|
28 | useEffect(() => {
|
29 |
|
30 | let onResize = () => {
|
31 | setSize(size => {
|
32 | let newSize = getViewportSize();
|
33 | if (newSize.width === size.width && newSize.height === size.height) {
|
34 | return size;
|
35 | }
|
36 | return newSize;
|
37 | });
|
38 | };
|
39 |
|
40 | if (!visualViewport) {
|
41 | window.addEventListener('resize', onResize);
|
42 | } else {
|
43 | visualViewport.addEventListener('resize', onResize);
|
44 | }
|
45 |
|
46 | return () => {
|
47 | if (!visualViewport) {
|
48 | window.removeEventListener('resize', onResize);
|
49 | } else {
|
50 | visualViewport.removeEventListener('resize', onResize);
|
51 | }
|
52 | };
|
53 | }, []);
|
54 |
|
55 | return size;
|
56 | }
|
57 |
|
58 | function getViewportSize(): ViewportSize {
|
59 | return {
|
60 | width: (visualViewport && visualViewport?.width) || window.innerWidth,
|
61 | height: (visualViewport && visualViewport?.height) || window.innerHeight
|
62 | };
|
63 | }
|