Fade-in component to animate viewing, no extra dependencies required

Example.js

<FadeIn>
  <Element>Element 1</Element>
  <Element>Element 2</Element>
  <Element>Element 3</Element>
  <Element>Element 4</Element>
  <Element>Element 5</Element>
  <Element>Element 6</Element>
</FadeIn>


<FadeIn delay={300} transitionDuration={700}>
  <Element>Element 1</Element>
  <Element>Element 2</Element>
  <Element>Element 3</Element>
  <Element>Element 4</Element>
  <Element>Element 5</Element>
  <Element>Element 6</Element>
</FadeIn>


With Class names
<FadeIn className="container" childClassName="child">
  <Element>Element 1</Element>
  <Element>Element 2</Element>
  <Element>Element 3</Element>
  <Element>Element 4</Element>
  <Element>Element 5</Element>
  <Element>Element 6</Element>
</FadeIn>

FadeIn.js

import React, { useState, useEffect, Children } from 'react';

const FadeIn = ({
  delay = 50,
  transitionDuration = 400,
  className,
  childClassName,
  children,
}) => {
  const [maxIsVisible, setMaxIsVisible] = useState(0);

  useEffect(() => {
    let i = 0;
    const count = Children.count(children);
    const interval = setInterval(() => {
      i += 1;
      if (i > count) {
        clearInterval(interval);
      }
      setMaxIsVisible(i);
    }, delay);
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div className={className}>
      {Children.map(children, (child, i) => {
        const style = {
          transition: `opacity ${transitionDuration}ms, top ${transitionDuration}ms`,
          position: 'relative',
          top: maxIsVisible > i ? 0 : 20,
          opacity: maxIsVisible > i ? 1 : 0,
        };
        return (
          <div className={childClassName} style={style}>
            {child}
          </div>
        );
      })}
    </div>
  );
};

export default FadeIn;