V2 Migration Guide
With mostly just new features, V3 also makes a few breaking changes. See the following and migrate any code that is affected.
Prop changes for <Parallax/>
If you've used any of the following props rename to new ones, or refactor if they are no longer supported.
x
becomestranslateX
.y
becomestranslateY
.styleOuter
becomesstyle
.styleInner
is no longer supported - There's only a single element returned by the component.tagOuter
is no longer supported - If you need a custom element use theuseParallax
hook instead.tagInner
is no longer supported - There's only a single element returned by the component.
Using the useController hook.
- The hook
useController
has been renamed touseParallaxController
. - The hook returns the instance of the controller directly.
If you used the following:
const { parallaxController } = useController();
change it to:
const parallaxController = useParallaxController();
Prop changes for <ParallaxBanner/>
Layers now accept all parallax props but you will need to update if you used the layer.amount
prop.
layer.amount
is no longer supported. Tryspeed
or any new parallax props.layer.props
is no longer supported. If you need to add props to the layer DOM element just define them in thelayer
.- All
HTMLElement
props are now spread to the root element.
Removed default class names
If you relied on either the parallax-outer
, parallax-inner
, parallax-banner
or parallax-banner-layer-[x]
class names for styling you will need to refactor or set them manually.