Skip to content

Commit 782f1b5

Browse files
authored
Merge pull request #4 from frontend-opensource-project/feature/use-window-size
Feature/use-window-size
2 parents ad3761a + 965d2ad commit 782f1b5

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

src/hooks/useWindowSize.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useEffect, useState } from 'react';
2+
import { PositiveInteger } from '../types/number';
3+
4+
interface WindowSize {
5+
width: number | null;
6+
height: number | null;
7+
}
8+
9+
/**
10+
* useWindowSize : 브라우저의 너비와 높이를 제공하는 훅
11+
* @param {number} [delayTime=200] 지연 시간(ms). 리사이즈 이벤트 딜레이 설정. Default=200
12+
* @returns {{ width: number, height: number }} 브라우저의 너비와 높이를 담은 객체
13+
* @description
14+
* 브라우저 창의 사이즈가 변경될 때마다 해당 창의 너비와 높이를 업데이트합니다.
15+
* UI의 세밀한 조작 등 동적인 변화에 유용합니다.
16+
*/
17+
18+
const useWindowSize = <T extends number>(
19+
delayTime: PositiveInteger<T> = 200 as PositiveInteger<T>
20+
): WindowSize => {
21+
const isClient = typeof window === 'object';
22+
23+
const [windowSize, setWindowSize] = useState<WindowSize>({
24+
width: isClient ? window.innerWidth : null,
25+
height: isClient ? window.innerHeight : null,
26+
});
27+
28+
useEffect(() => {
29+
if (!isClient) return;
30+
31+
let timeoutId: NodeJS.Timeout | null = null;
32+
33+
const updateWindowSize = () => {
34+
setWindowSize({
35+
width: window.innerWidth,
36+
height: window.innerHeight,
37+
});
38+
};
39+
40+
const handleWindowResize = () => {
41+
if (timeoutId) clearTimeout(timeoutId);
42+
43+
if (delayTime > 0) {
44+
timeoutId = setTimeout(updateWindowSize, delayTime);
45+
} else if (delayTime === 0) {
46+
updateWindowSize();
47+
}
48+
};
49+
50+
window.addEventListener('resize', handleWindowResize);
51+
return () => {
52+
window.removeEventListener('resize', handleWindowResize);
53+
if (timeoutId) clearTimeout(timeoutId);
54+
};
55+
// eslint-disable-next-line react-hooks/exhaustive-deps
56+
}, []);
57+
58+
return windowSize;
59+
};
60+
61+
export default useWindowSize;

0 commit comments

Comments
 (0)