File tree Expand file tree Collapse file tree 2 files changed +45
-0
lines changed Expand file tree Collapse file tree 2 files changed +45
-0
lines changed Original file line number Diff line number Diff line change 33 "useKeyCombination" : " useKeyCombination" ,
44 "useLongPress" : " useLongPress" ,
55 "useMousePosition" : " useMousePosition" ,
6+ "useScrollLock" : " useScrollLock" ,
67 "useSound" : " useSound" ,
78 "useTimer" : " useTimer" ,
89 "useToggle" : " useToggle" ,
Original file line number Diff line number Diff line change 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+ ` ` `
You can’t perform that action at this time.
0 commit comments