Skip to content

Commit e05b1a3

Browse files
committed
Refactor
1 parent 5e40842 commit e05b1a3

File tree

1 file changed

+19
-34
lines changed

1 file changed

+19
-34
lines changed

utils/hooks/useResponsive.js

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
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+
320
export const useResponsive = () => {
421
const size = {
522
mobileS: 320,
@@ -14,44 +31,12 @@ export const useResponsive = () => {
1431
const [currentScreenSize, setScreenSize] = React.useState({});
1532

1633
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);
3435
}, [size.desktop, size.laptop, size.tablet]);
3536

3637
React.useEffect(() => {
3738
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);
5540
}
5641

5742
window.addEventListener('resize', handleScreenWidth);

0 commit comments

Comments
 (0)