Skip to main content


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';


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(() => {
}, [location.pathname]);

Parallax Controller

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