Get started with react-transition-group CDN

import React, { useState, useEffect } from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';

const FadeIn = ({ children }) => {
  const [inState, setInState] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setInState(true);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <CSSTransition in={inState} timeout={500} classNames="fade">
      {children}
    </CSSTransition>
  );
};

const App = () => {
  return (
    <div className="App">
      <button onClick={() => console.log('Clicked')}>Click me</button>
      <FadeIn>
        <h1>Hello, world!</h1>
      </FadeIn>
    </div>
  );
};

export default App;

// Add the following CSS rules to make the fade transition work
// You can add them to your global styles or inline in the component
const fadeIn = {
  opacity: 0,
  filter: 'blur(2px)',
  transition: 'all 0.5s ease',
};

const fadeInActive = {
  opacity: 1,
  filter: 'blur(0)',
};

.fade-enter {
  opacity: 0;
  filter: blur(2px);
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.fade-enter-active {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.5s ease, filter 0.5s ease;
}