GA-MO/react-skrollr

Document how to call refresh() on ParallaxProvider

Opened this issue · 1 comments

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>
)