react-transition-group
An easy way to perform animations when a React component enters or leaves the DOM
React Transition Group is a React library that lets you apply CSS animations when components appear or disappear from the screen by exposing entering, active, and leaving states you can style however you want.
React Transition Group is a JavaScript library for React that helps you add animations when components appear on screen, disappear from screen, or transition between states. The core idea is that when you show or hide something in a React app, you often want a visual effect rather than an abrupt pop-in or pop-out. This library gives you the building blocks to control what happens at those moments.
It works by tracking whether a component is entering, active, or leaving the page, and exposing that state so you can attach CSS classes or inline styles at each stage. The typical pattern is: apply one set of styles when something appears, hold at a second set of styles while it is visible, and apply a third set when it is removed. The library handles the timing and cleanup rather than leaving that up to you.
The package is maintained under the official React community GitHub organization and is available as an npm package. TypeScript type definitions are published separately through the DefinitelyTyped project. The README is brief and points to external documentation for full usage details.
There is a version 1 of the library that was a direct replacement for older React add-ons, but it is no longer updated. The current version 2 and above has a different API and is not backwards compatible with version 1. The README includes a migration guide for anyone moving between the two.
Where it fits
- Add fade-in and fade-out CSS animations when React components mount and unmount
- Create animated page transitions by attaching entering and leaving states to route components
- Animate list items as they are added to or removed from a list using TransitionGroup
- Control the timing and CSS classes of any component animation without a heavy animation library