Skip to content

Commit ef1e65d

Browse files
committed
Refactor useResponsive
1 parent e05b1a3 commit ef1e65d

File tree

1 file changed

+18
-20
lines changed

1 file changed

+18
-20
lines changed

utils/hooks/useResponsive.js

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,5 @@
11
import * as React from 'react';
22

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-
203
export const useResponsive = () => {
214
const size = {
225
mobileS: 320,
@@ -31,16 +14,31 @@ export const useResponsive = () => {
3114
const [currentScreenSize, setScreenSize] = React.useState({});
3215

3316
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+
};
3634

37-
React.useEffect(() => {
3835
function handleScreenWidth() {
3936
setScreenSize(screenSizeObject);
4037
}
4138

4239
window.addEventListener('resize', handleScreenWidth);
4340

41+
setScreenSize(screenSizeObject);
4442
return () => {
4543
window.removeEventListener('resize', handleScreenWidth);
4644
};

0 commit comments

Comments
 (0)