Usage
If you are using Next 13 see this guide for the NextJS App Router
Setting Up
Wrap with a ParallaxProvider
The <ParallaxProvider/>
must wrap the component root that contains all components or hooks that use the parallax context. This should be a top level component like <App>
and will provide necessary access through the React context API to the Parallax Controller. For example:
import { ParallaxProvider } from 'react-scroll-parallax';
function App() {
render() {
return (
<ParallaxProvider>
<AppRoutes />
</ParallaxProvider>
);
}
}
ParallaxProvider component documentation.
Creating effects
After wrapping the app with a provider you can start adding parallax effects.
With useParallax()
Then import the useParallax
hook and use it anywhere within the provider. Here's an example that uses the speed
prop so simply speed up (or slowdown) the rate of scroll.
import { useParallax } from 'react-scroll-parallax';
const Component = () => {
const { ref } = useParallax({ speed: 10 });
return <div ref={ref} className="my-thing" />;
};
The hook will apply the effect styles directly to the element that the ref
is attached.
Any of the documented effects and configurations can be passed as params to the hook.
Or with <Parallax />
You can also use the <Parallax>
component. Here's an example that will transform the element on the translateY
axis starting at -20%
and ending at 20%
([-20, 20]
*percent is assumed with no provided unit).
import { Parallax } from 'react-scroll-parallax';
const Component = () => (
<Parallax translateY={[-20, 20]}>
<div className="my-thing" />
</Parallax>
);
The component will apply the effect styles to a div
managed by the component and not the children.
Any of the documented effects and configurations can be passed as props to the component.
This example uses the translateX
transform starting at -100px
and ending at 200px
.
import { Parallax } from 'react-scroll-parallax';
const Component = () => (
<Parallax translateX={['-100px', '200px']}>
<div className="my-thing" />
</Parallax>
);
Parallax component documentation.
Finally
Updating the Cache
Performance relies on caching values that cause layout, but this cache needs to be updated if the page layout changes from an event other than a load
, resize
, focus
or blur
.
Route Changes
Depending on your app setup, you may need to update the Parallax Controller cache when the route changes since scroll and page height change. Here's a component and hook written for Gatsby that will update the controller via context whenever the location changes.
import { useEffect } from 'react';
import { useLocation } from '@reach/router';
import { useParallaxController } from 'react-scroll-parallax';
function useUpdateControllerOnRouteChange() {
const location = useLocation();
const parallaxController = useParallaxController();
useEffect(() => {
parallaxController.update();
}, [location.pathname]);
}
const ParallaxRouteUpdate = () => {
useUpdateControllerOnRouteChange();
return null;
};
Images Loading
Often times images impact the position of content on the page. This is another common scenario that will require updating the cache which can be done using an onLoad
event.
import { useParallaxController } from 'react-scroll-parallax';
const Image = () => {
const parallaxController = useParallaxController();
return <img src="image.jpg" onLoad={() => parallaxController.update()} />;
};