react-skrollr
react-skrollr copied to clipboard
Document how to call refresh() on ParallaxProvider
Would be really handy to either see an example, or have some documentation around how to call the refresh()
function on the ParallaxProvider
I found a way with Legacy Context : https://reactjs.org/docs/legacy-context.html
const data = {
'data-top-top': 'transform: translateY(-30vh);',
'data-bottom-top': 'transform: translateY(50vh);'
}
class Items extends Component {
componentDidUpdate() {
this.context.refresh() // Refresh method of ParallaxProvider component
}
render() {
return (
<Fragment>
<Parallax data={data}>
<img src={Image} />
</Parallax>
<Parallax data={data}>
<img src={Image} />
</Parallax>
<Parallax data={data}>
<img src={Image} />
</Parallax>
<Parallax data={data}>
<img src={Image} />
</Parallax>
</Fragment>
)
}
static contextTypes = {
refresh: PropTypes.func
}
}
const List = () => (
<ParallaxProvider init={{forceHeight: false}}>
<Items />
</ParallaxProvider>
)