React Transition Group is a set of low-level primitive components for managing component states over time, specifically designed to facilitate animations in React applications. It enables developers to define and control lifecycle events for components entering, exiting, or remaining in the DOM. The current stable version is 4.4.5, last updated in August 2022, with a release cadence focused on stability and compatibility with React's evolving ecosystem. This library doesn't dictate specific animation libraries or CSS frameworks; instead, it provides hooks and class toggles (`CSSTransition`) that allow integration with arbitrary CSS transitions/animations or JavaScript animation libraries. Its key differentiator is providing an unopinionated, foundational API for animation patterns, contrasting with higher-level animation libraries that often bundle their own animation engines or opinions.
npm install react-transition-groupVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates animating a list of items entering and exiting using `TransitionGroup` and `CSSTransition`, applying basic CSS classes for fade effects. It also addresses the `nodeRef` requirement for React Strict Mode.
Refer to the official migration guide from v1 to v2+ at reactcommunity.org/react-transition-group/Migration.md. This often involves changes to component structure and prop names.
For `CSSTransition` and `Transition` components, always provide a `nodeRef` prop, which is a `React.Ref` object pointing to the DOM element you want to transition. The child component must then forward this ref. For `CSSTransition` specifically, use a render prop pattern to access the `nodeRef` property provided by the component state.
Plan a migration to `react-transition-group` v4.x, carefully reviewing the breaking changes between v1 and v2, and subsequent versions.
If your intention is to use CSS classes to drive animations, ensure you are using the `CSSTransition` component and providing appropriate `classNames` and `timeout` props. `Transition` is for more generic, often JavaScript-driven, animation logic.
Provide a `nodeRef={React.createRef<HTMLElement>()}` prop to your `CSSTransition` or `Transition` component, and ensure the direct child component forwards this ref to the DOM element being animated. For `CSSTransition`, use the render prop pattern to access `state.nodeRef`.Ensure `classNames` is either a string (e.g., `classNames="my-animation"`) which will generate `my-animation-enter`, `my-animation-exit` etc., or an object specifying custom class names for each state (e.g., `{ enter: 'my-enter', exit: 'my-exit' }`).Ensure `TransitionGroup` is rendered with a valid DOM element as its `component` prop (e.g., `'div'`, `'ul'`). Alternatively, ensure all children of `TransitionGroup` are `CSSTransition` or `Transition` components, and that `nodeRef` is correctly implemented for each. For complex scenarios, consider using `mountOnEnter` and `unmountOnExit` to control DOM presence.