Skip to main content


Main hook for applying parallax effects to a DOM element. Any of the documented effects and configurations can be passed as params to the hook.

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


To use the hook assign the ref returned to the element that you would like to apply effects to. Then provide the hook with the prop configuration for the effects you need.

function Component() {
const { ref } = useParallax<HTMLDivElement>({ speed: 10 });
return <div ref={ref} />;

Returned Values

The useParallax() hook returns the following:

refref that must be assigned to a DOM element
controllerThe ParallaxController instance.
elementThe Element created by the ParallaxController.