react-skrollr icon indicating copy to clipboard operation
react-skrollr copied to clipboard

Document how to call refresh() on ParallaxProvider

Open haxxxton opened this issue 6 years ago • 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

haxxxton avatar May 27 '18 03:05 haxxxton

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

firestar300 avatar Feb 05 '19 09:02 firestar300