Reveal icons on scroll in React.js

Question

I am a beginner in React.js and have a problem. I am trying to reveal icons on scroll with a little delay of time for each icon. Something like that Example template . In this bootstrap template you can see when we scroll icons reveal (each icon with a little delay of time). Its possible with jquery scroll reveal module. But I don't know how to achive this with React.js. Is there anyway to do this in react.js using javascript only? Here is my react functional component code.

import React from 'react';

function Howitworks() {
return (
    <div className="my-5">
        <div className="container text-center" id="contactContainer">
            <div className="row">
                <div className="col-lg-12 mx-auto">
                    <h2 className="text-center">How It Works</h2>
                    <hr className="my-4 thick-hr-2" />
                </div>
            </div>
        </div>
        <div className="container text-center">
            <div className="row">
                <div className="col-md-6 col-lg-4">
                    <div className="service-box mt-5 mx-auto">
                        <span className="fas fa-home fa-4x icon-orange"></span>
                        <h3 className="my-3">Choose A Restaurant</h3>
                    </div>
                </div>
                <div className="col-md-6 col-lg-4">
                    <div className="service-box mt-5 mx-auto">
                        <span className="fas fa-utensils fa-4x icon-orange"></span>
                        <h3 className="my-3">Choose A Tasty Dish</h3>
                    </div>
                </div>
                <div className="col-md-6 col-lg-4">
                    <div className="service-box mt-5 mx-auto">
                        <span className="fas fa-shipping-fast fa-4x icon-orange"></span>
                        <h3 className="my-3">Pick Up Or Delivery</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
)
}

export default Howitworks;

Answer 1

Use Intersection Observer to observe when the containing div for the icons enters the viewport. Intersection Observer is vanilla JS, does not require any external modules or libraries, and is built for when elements are entering the viewport on scroll.

Here, I will make the container div easily targetable by giving it an id :

    <div id="container-intersect" className="container text-center">
        ...
        ...
    </div>

I then create a configuration object for IntersectionObserver :

// threshold controls how much of #container-intersect must 
// be in view before firing the callback function. A value 
// of 1.0 means that #container-intersect must be entirely 
// in view. A value of 0.5 means that #container-intersect 
// must be at least 50% in view.

var options = {
  root: document.querySelector('body'),
  rootMargin: '0',
  threshold: 1.0
}

Then I create a new observer that fires the function callback when #container-intersect enters the viewport.

var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#container-intersect');
observer.observe(target);

callback fires and fades in your elements.

var callback = function() { 
    let icons = document.querySelectorAll('.service-box span');
    icons.forEach(function(icon, index) {
        icons[index].style.opacity = '1';
    });
};

You can place all of this code inside your componentDidMount() lifecycle function in your component, like so:

function Howitworks() {
    componentDidMount() {
        var options = {
            root: document.querySelector('body'),
            rootMargin: '0',
            threshold: 1.0
        }

        var observer = new IntersectionObserver(callback, options);
        var target = document.querySelector('#container-intersect');
        observer.observe(target);

        var callback = function() { 
            let icons = document.querySelectorAll('.service-box span');
            icons.forEach(function(icon, index) {
                icons[index].style.opacity = '1';
            });
        };

    }

    render() {
        return (
            ...
            ...
        );
    }

Answer 2

You can use this lib to detect the component is visible on screen. Lib react-on-screen: https://github.com/fkhadra/react-on-screen For use:

import React from 'react';
import TrackVisibility from 'react-on-screen';

const ComponentToTrack = ({ isVisible }) => {
    const style = {
        background: isVisible ? 'red' : 'blue'
    };
    return <div style={style}>Hello</div>;
}

const YourApp = () => {
    return (
       {/* Some Stuff */}
        <TrackVisibility>
            <ComponentToTrack />
        </TrackVisibility>
       {/* Some Stuff */}
    );
}