1- import React , { PropsWithChildren , useEffect , useRef } from 'react' ;
1+ import React , { PropsWithChildren , useEffect , useState } from 'react' ;
22
33import { ParallaxContext } from '../../context/ParallaxContext' ;
44import { ScrollAxis } from 'parallax-controller' ;
@@ -8,41 +8,44 @@ import { createController } from './helpers';
88export function ParallaxProvider (
99 props : PropsWithChildren < ParallaxProviderProps >
1010) {
11- const controller = useRef (
11+ const [ controller ] = useState (
1212 createController ( {
1313 scrollAxis : props . scrollAxis || ScrollAxis . vertical ,
1414 scrollContainer : props . scrollContainer ,
1515 disabled : props . isDisabled ,
1616 } )
1717 ) ;
18- 1918 // update scroll container
2019 useEffect ( ( ) => {
21- if ( props . scrollContainer && controller . current ) {
22- controller . current . updateScrollContainer ( props . scrollContainer ) ;
20+ if ( props . scrollContainer && controller ) {
21+ controller . updateScrollContainer ( props . scrollContainer ) ;
2322 }
24- } , [ props . scrollContainer , controller . current ] ) ;
23+ } , [ props . scrollContainer , controller ] ) ;
2524
2625 // disable/enable parallax
2726 useEffect ( ( ) => {
28- if ( props . isDisabled && controller . current ) {
29- controller . current . disableParallaxController ( ) ;
27+ if ( props . isDisabled && controller ) {
28+ controller . disableParallaxController ( ) ;
3029 }
31- if ( ! props . isDisabled && controller . current ) {
32- controller . current . enableParallaxController ( ) ;
30+ if ( ! props . isDisabled && controller ) {
31+ controller . enableParallaxController ( ) ;
3332 }
34- } , [ props . isDisabled , controller . current ] ) ;
33+ } , [ props . isDisabled , controller ] ) ;
3534
36- // remove the controller when unmounting
35+ // enable and disable parallax controller on mount/unmount
3736 useEffect ( ( ) => {
37+ // Enable it on mount
38+ if ( ! props . isDisabled && controller ) {
39+ controller && controller ?. enableParallaxController ( ) ;
40+ }
3841 return ( ) => {
39- controller ?. current && controller ?. current . destroy ( ) ;
40- controller . current = null ;
42+ // Disable it on unmount
43+ controller && controller ?. disableParallaxController ( ) ;
4144 } ;
4245 } , [ ] ) ;
4346
4447 return (
45- < ParallaxContext . Provider value = { controller . current } >
48+ < ParallaxContext . Provider value = { controller } >
4649 { props . children }
4750 </ ParallaxContext . Provider >
4851 ) ;
0 commit comments