scrollreveal in react

// npm install --save scrollreveal or install like you're used to doing it.
// It doesn't work well if there are multiple instances of ScrollReveal,
// so we have to create a module returning an instance:
// file ScrollReveal.js:
import ScrollReveal from 'scrollreveal'
export default ScrollReveal()

// Then in a component:
import React from 'react'
import sr from './ScrollReveal'

export class RevealMe extends React.Component {
  props: Props;

  componentDidMount = () => {
    const config = {
      origin: 'right',
      duration: 1000,
      delay: 150,
      distance: '500px',
      scale: 1,
      easing: 'ease',
    }

    sr.reveal(this.refs.box1, config)
  }

  render () {
    return (
      <section className='testimonial' id='testimonials'>
        <div className='row' ref='box1'>
          ...
        </div>
      </section>
    )
  }
}
export default RevealMe

// configure scrollreveal in componentDidMount.
// access the DOM element, setting a ref='name' and
// access using this.refs.name.
// the entire page must scroll,
// if you have a container element which does an overflow: hidden,
// the animation may not trigger.
// you can check scrolling like this:
document.onscroll = function() { console.log('scrawwwwl'); };

Thanks much, simple and to the point without needing extra bloat! Good comments

Thank you! Works perfectly.

Excellent.

In case of the new update of React. Only have to config the element to use like this:
sr.reveal('.display-1', {
delay: 375,
duration: 1000,
reset: true
})

Finally found a great solution!! Thank you!!