Skip to main content

useParallaxController

This hook provides you access to the ParallaxController via React context. The hook must be called in a component rendered within the <ParallaxProvider>. The most common usage of the controller is to update cache if the page layout has changed.

import { useParallaxController } from 'react-scroll-parallax';

Examples​

The following are some common scenarios that occur where you may need to access and update the controller.

Usage For Images​

Updating the ParallaxController cache once an image loads:

function Image(props) {
  const parallaxController = useParallaxController();

  // updates cached values after image dimensions have loaded
  const handleLoad = () => parallaxController.update();

  return <img src={props.src} onLoad={handleLoad} />;
}

Example Route Change Hook​

Another common use case is the need to update cache after a route changes. This custom hook updates the controller each time the location changes.

function useUpdateControllerOnRouteChange() {
  const location = useLocation();
  const parallaxController = useParallaxController();

  useEffect(() => {
    parallaxController.update();
  }, [location.pathname]);
}

Parallax Controller​

See the parallax-controller documentation of all the methods that can be called from the controller