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
-
20
3
export const useResponsive = ( ) => {
21
4
const size = {
22
5
mobileS : 320 ,
@@ -31,16 +14,31 @@ export const useResponsive = () => {
31
14
const [ currentScreenSize , setScreenSize ] = React . useState ( { } ) ;
32
15
33
16
React . useEffect ( ( ) => {
34
- setScreenSize ( screenSizeObject ) ;
35
- } , [ size . desktop , size . laptop , size . tablet ] ) ;
17
+ const screenSizeObject = {
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
+ } ;
36
34
37
- React . useEffect ( ( ) => {
38
35
function handleScreenWidth ( ) {
39
36
setScreenSize ( screenSizeObject ) ;
40
37
}
41
38
42
39
window . addEventListener ( 'resize' , handleScreenWidth ) ;
43
40
41
+ setScreenSize ( screenSizeObject ) ;
44
42
return ( ) => {
45
43
window . removeEventListener ( 'resize' , handleScreenWidth ) ;
46
44
} ;
0 commit comments