File tree Expand file tree Collapse file tree 2 files changed +42
-17
lines changed Expand file tree Collapse file tree 2 files changed +42
-17
lines changed Original file line number Diff line number Diff line change @@ -5,20 +5,34 @@ import ShowDocs from '../util/ShowDocs';
5
5
6
6
const Demo = ( ) => {
7
7
const [ locked , toggleLocked ] = useToggle ( false )
8
-
9
8
useLockBodyScroll ( locked ) ;
10
9
11
10
return (
12
11
< div style = { { height : '200vh' } } >
13
- < button onClick = { ( ) => toggleLocked ( ) } style = { { position : 'fixed' , left : 0 , right : 0 } } >
12
+ < button onClick = { ( ) => toggleLocked ( ) } style = { { position : 'fixed' , left : 0 } } >
14
13
{ locked ? 'Unlock' : 'Lock' }
15
14
</ button >
16
15
</ div >
17
16
) ;
18
17
} ;
19
18
19
+ const AnotherComponent = ( ) => {
20
+ const [ locked , toggleLocked ] = useToggle ( false )
21
+ useLockBodyScroll ( locked ) ;
22
+
23
+ return (
24
+ < button onClick = { ( ) => toggleLocked ( ) } style = { { position : 'fixed' , left : 0 , top : 40 } } >
25
+ { locked ? 'Unlock' : 'Lock' }
26
+ </ button >
27
+ ) ;
28
+ } ;
29
+
20
30
storiesOf ( 'Side effects|useLockBodyScroll' , module )
21
31
. add ( 'Docs' , ( ) => < ShowDocs md = { require ( '../../docs/useLockBodyScroll.md' ) } /> )
22
- . add ( 'Demo' , ( ) =>
23
- < Demo />
32
+ . add ( 'Demo' , ( ) => < Demo /> )
33
+ . add ( 'Two hooks on page' , ( ) =>
34
+ < >
35
+ < AnotherComponent />
36
+ < Demo />
37
+ </ >
24
38
)
Original file line number Diff line number Diff line change 1
- import { useRef , useEffect } from 'react' ;
2
- import { isClient } from './util' ;
3
- import useUnmount from './useUnmount' ;
1
+ import { useEffect } from 'react' ;
4
2
5
- const useLockBodyScroll = ( enabled : boolean = true ) => {
6
- const originalOverflow = useRef (
7
- isClient ? window . getComputedStyle ( document . body ) . overflow : 'visible'
8
- ) ;
3
+ let counter = 0 ;
4
+ let originalOverflow : string | null = null ;
5
+
6
+ const lock = ( ) => {
7
+ originalOverflow = window . getComputedStyle ( document . body ) . overflow ;
8
+ document . body . style . overflow = 'hidden' ;
9
+ } ;
10
+
11
+ const unlock = ( ) => {
12
+ document . body . style . overflow = originalOverflow ;
13
+ originalOverflow = null ;
14
+ } ;
9
15
10
- useEffect ( ( ) => {
11
- document . body . style . overflow = enabled ? "hidden" : originalOverflow . current ;
12
- } , [ enabled ] ) ;
16
+ const increment = ( ) => {
17
+ counter ++ ;
18
+ if ( counter === 1 ) lock ( ) ;
19
+ } ;
13
20
14
- useUnmount ( ( ) => {
15
- document . body . style . overflow = originalOverflow . current
16
- } ) ;
21
+ const decrement = ( ) => {
22
+ counter -- ;
23
+ if ( counter === 0 ) unlock ( ) ;
24
+ } ;
25
+
26
+ const useLockBodyScroll = ( enabled : boolean = true ) => {
27
+ useEffect ( ( ) => enabled ? ( increment ( ) , decrement ) : undefined , [ enabled ] ) ;
17
28
}
18
29
19
30
export default useLockBodyScroll ;
You can’t perform that action at this time.
0 commit comments