What are some examples of using react-transition-group?

Can you show me some examples of using react-transition-group in a React app?

Sure! React Transition Group is a library for managing transitions in React applications. One common example is using it to animate a component when it enters or exits the DOM.

How do I implement a simple fade-in effect using react-transition-group?

You can use the CSSTransition component from react-transition-group. Wrap your component with it and define CSS classes for the enter and exit states.

Can you provide a code snippet for that?

Absolutely! Here's a simple example:

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={show}
  timeout={300}
  classNames="fade"
  unmountOnExit
>
  <div className="fade">I will fade in and out!</div>
</CSSTransition>

Make sure to define the CSS for the fade class!

What CSS should I use for the fade effect?

You can use the following CSS:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}