FadeInOut React component

FadeInOut.js

import { useState, useEffect } from 'react';

import './styles.css';

const stages = {
  unmounted: 'unmounted',
  entering: 'entering',
  entered: 'entered',
  completed: 'completed',
  exiting: 'exiting',
  exited: 'exited'
};

const FadeInOut = ({ children, show = false, duration = 200, ...props }) => {
  const [transitionStage, setTransitionStage] = useState(stages.unmounted);

  useEffect(() => {
    if (show) {
      setTransitionStage(stages.entering);
    }
  }, []);

  useEffect(() => {
    if (show) {
      if (transitionStage !== stages.entering && transitionStage !== stages.entered) {
        setTransitionStage(stages.entering);
      }
    } else {
      if (transitionStage === stages.entering || transitionStage === stages.entered) {
        setTransitionStage(stages.exiting);
      }
    }
  }, [show]);

  useEffect(() => {
    if (transitionStage === stages.exited) {
      setTransitionStage(stages.unmounted);
    } else if (transitionStage === stages.entering) {
      setTimeout(() => {
        setTransitionStage(stages.entered);
      }, 0);
    } else if (transitionStage === stages.exiting) {
      setTimeout(() => {
        setTransitionStage(stages.exited);
      }, duration);
    }
  }, [transitionStage]);

  return (
    <>
      {transitionStage === stages.unmounted ? null : (
        <div
          className={`fade-${stages[transitionStage]}`}
          style={{ transitionDuration: `${duration}ms` }}
          {...props}
        >
          {children}
        </div>
      )}
    </>
  );
};

export { FadeInOut };

styles.css

.fade-exiting,
.fade-exited,
.fade-unmounted {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.fade-entered {
  opacity: 1;
  visibility: visible;
}

.fade-entering,
.fade-exiting {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}