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'); };

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