1
1
import * as React from 'react' ;
2
2
3
+ const screenSizeObject = {
4
+ currentScreenWidth : window . innerWidth ,
5
+ currentScreenHeight : window . innerHeight ,
6
+ isMobile : window . innerWidth < size . tablet ,
7
+ isTablet : size . tablet <= window . innerWidth && window . innerWidth < size . laptop ,
8
+ isLaptop :
9
+ size . laptop <= window . innerWidth && window . innerWidth < size . desktop ,
10
+ isDesktop : size . desktop <= window . innerWidth ,
11
+ isLTETablet : window . innerWidth < size . laptop ,
12
+ isLTELaptop : window . innerWidth < size . desktop ,
13
+ isLandscape : window . innerWidth > window . innerHeight ,
14
+ isTouchDevice :
15
+ 'ontouchstart' in window ||
16
+ navigator . maxTouchPoints > 0 ||
17
+ navigator . msMaxTouchPoints > 0 ,
18
+ } ;
19
+
3
20
export const useResponsive = ( ) => {
4
21
const size = {
5
22
mobileS : 320 ,
@@ -14,44 +31,12 @@ export const useResponsive = () => {
14
31
const [ currentScreenSize , setScreenSize ] = React . useState ( { } ) ;
15
32
16
33
React . useEffect ( ( ) => {
17
- setScreenSize ( {
18
- currentScreenWidth : window . innerWidth ,
19
- currentScreenHeight : window . innerHeight ,
20
- isMobile : window . innerWidth < size . tablet ,
21
- isTablet :
22
- size . tablet <= window . innerWidth && window . innerWidth < size . laptop ,
23
- isLaptop :
24
- size . laptop <= window . innerWidth && window . innerWidth < size . desktop ,
25
- isDesktop : size . desktop <= window . innerWidth ,
26
- isLTETablet : window . innerWidth < size . laptop ,
27
- isLTELaptop : window . innerWidth < size . desktop ,
28
- isLandscape : window . innerWidth > window . innerHeight ,
29
- isTouchDevice :
30
- 'ontouchstart' in window ||
31
- navigator . maxTouchPoints > 0 ||
32
- navigator . msMaxTouchPoints > 0 ,
33
- } ) ;
34
+ setScreenSize ( screenSizeObject ) ;
34
35
} , [ size . desktop , size . laptop , size . tablet ] ) ;
35
36
36
37
React . useEffect ( ( ) => {
37
38
function handleScreenWidth ( ) {
38
- setScreenSize ( {
39
- currentScreenWidth : window . innerWidth ,
40
- currentScreenHeight : window . innerHeight ,
41
- isMobile : window . innerWidth < size . tablet ,
42
- isTablet :
43
- size . tablet <= window . innerWidth && window . innerWidth < size . laptop ,
44
- isLaptop :
45
- size . laptop <= window . innerWidth && window . innerWidth < size . desktop ,
46
- isDesktop : size . desktop <= window . innerWidth ,
47
- isLTETablet : window . innerWidth < size . laptop ,
48
- isLTELaptop : window . innerWidth < size . desktop ,
49
- isLandscape : window . innerWidth > window . innerHeight ,
50
- isTouchDevice :
51
- 'ontouchstart' in window ||
52
- navigator . maxTouchPoints > 0 ||
53
- navigator . msMaxTouchPoints > 0 ,
54
- } ) ;
39
+ setScreenSize ( screenSizeObject ) ;
55
40
}
56
41
57
42
window . addEventListener ( 'resize' , handleScreenWidth ) ;
0 commit comments