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