Skip to content

Commit f2f8d94

Browse files
authored
Merge pull request #76 from frontend-opensource-project/URH-99/use-scroll-lock-docs
[URH-99] useScrollLock 문서 신규
2 parents 3f2ecfd + d47bea5 commit f2f8d94

File tree

2 files changed

+45
-0
lines changed

2 files changed

+45
-0
lines changed

docs/pages/docs/hooks/_meta.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"useKeyCombination": "useKeyCombination",
44
"useLongPress": "useLongPress",
55
"useMousePosition": "useMousePosition",
6+
"useScrollLock": "useScrollLock",
67
"useSound": "useSound",
78
"useTimer": "useTimer",
89
"useToggle": "useToggle",
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# useScrollLock
2+
3+
## Introduce
4+
5+
페이지의 스크롤을 잠궈 사용자가 스크롤할 수 없도록 합니다.
6+
7+
(스크롤 바가 비활성화된 상태로, UI형태가 유지된 형태)
8+
9+
```ts
10+
const useScrollLock = (props: boolean): void
11+
```
12+
13+
### Props
14+
15+
boolean 값으로 스크롤의 잠금 여부를 관리합니다.
16+
17+
## Examples
18+
19+
```tsx copy filename="TestComponent.tsx"
20+
21+
const TestComponent = () => {
22+
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
23+
24+
useScrollLock(isModalOpen);
25+
26+
const openModal = () => {
27+
setIsModalOpen(true);
28+
};
29+
30+
const closeModal = () => {
31+
setIsModalOpen(false);
32+
};
33+
34+
return (
35+
<div style={styles.container}>
36+
{isModalOpen && (
37+
<div style={styles.modal}>
38+
<div style={styles.modalContent}>
39+
...
40+
</div>
41+
);
42+
};
43+
44+
```

0 commit comments

Comments
 (0)