react-transition-group

react-transition-group is a set of low-level React components for managing a component’s presence over time — specifically its mounting, updating, and unmounting lifecycle — so that CSS or JS animations can be tied to those state transitions. It grew out of the original React addons-transition-group API and was rewritten from the ground up in v2+ with a non-backwards-compatible, more flexible API.

Rather than baking in an opinionated animation engine, the library exposes state (entering, entered, exiting, exited) and lifecycle hooks that developers wire up to their own CSS classes, inline styles, or third-party animation libraries. TransitionGroup manages lists of transitioning children, CSSTransition layers on CSS class toggling, and SwitchTransition/ReplaceTransition handle transitioning between two mutually exclusive elements.

What You Get

• Transition - the base component exposing raw lifecycle state (entering/entered/exiting/exited) and callback hooks (onEnter, onEntering, onEntered, onExit, etc.)
• CSSTransition - layers CSS class name toggling on top of Transition for declarative, stylesheet-driven animations
• TransitionGroup - manages a dynamic set of Transition children (e.g. animating list items in and out) without unmounting them abruptly
• SwitchTransition and ReplaceTransition - coordinate transitioning between two mutually exclusive elements (e.g. crossfading between two states)
• Framework-agnostic animation hook-up: works with plain CSS transitions, CSS keyframes, or JS animation libraries like GSAP or react-spring

Common Use Cases

• Fading or sliding a modal, tooltip, or dropdown in and out as it mounts and unmounts
• Animating list items entering or leaving (e.g. a to-do list, notification stack, or search results list) via TransitionGroup
• Crossfading between two views or tabs using SwitchTransition instead of instantly swapping content
• Coordinating route-transition animations in a client-rendered app when a page component mounts/unmounts

Under The Hood

Architecture The library centers on src/Transition.js (622 lines), a class component implementing a small state machine (unmounted → exited → entering → entered → exiting) driven by componentDidMount/componentDidUpdate and timeouts; CSSTransition.js (378 lines) wraps it to toggle CSS class names at each state change, TransitionGroup.js (171 lines) tracks a map of currently-mounted/exiting children keyed by identity so leaving items animate before removal, and SwitchTransition.js (222 lines) composes two Transition instances to coordinate an exit-then-enter or simultaneous cross-fade sequence. Tech Stack Plain JavaScript (no TypeScript in the source; types are published separately via DefinitelyTyped), built with Babel to dual CJS/ESM output plus a Rollup UMD bundle, with dom-helpers and prop-types as its only non-React runtime dependencies and react/react-dom as peer dependencies (>=16.6.0). Code Quality Test coverage is strong for a UI library of this age: dedicated suites exist per component (Transition-test.js, CSSTransition-test.js, TransitionGroup-test.js, SwitchTransition-test.js, ChildMapping-test.js, plus an SSR-test.js for server-rendering behavior) using Jest and Testing Library, and CI gates on both ESLint and the full test suite before release via semantic-release. Prop validation relies on prop-types rather than static types, which is dated relative to newer React libraries but appropriate for the codebase’s age. API Design The API trades some initial-learning friction (developers must understand the entering/entered/exiting/exited state model and wire up their own CSS classes or callbacks) for maximum flexibility — there’s no bundled animation engine to fight against, and the same primitives compose cleanly whether the underlying animation is pure CSS, CSS-in-JS, or an external JS animation library.