0
# React Transition Group
1

2
React Transition Group is a comprehensive animation library for React applications that provides a set of components for managing component states over time, specifically designed with animation in mind. The library offers five main components - Transition, CSSTransition, SwitchTransition, TransitionGroup, and ReplaceTransition - that handle mounting and unmounting animations, CSS class-based transitions, switching between components, managing lists of transitioning components, and animating between two specific children respectively.
3

4
## Package Information
5

6
- **Package Name**: react-transition-group
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install react-transition-group`
10

11
## Core Imports
12

13
```javascript
14
import { Transition, CSSTransition, TransitionGroup, SwitchTransition, ReplaceTransition, config } from "react-transition-group";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Transition, CSSTransition, TransitionGroup, SwitchTransition, ReplaceTransition, config } = require("react-transition-group");
21
```
22

23
## Basic Usage
24

25
```javascript
26
import React, { useState } from 'react';
27
import { CSSTransition } from 'react-transition-group';
28

29
function App() {
30
  const [inProp, setInProp] = useState(false);
31
  
32
  return (
33
    <div>
34
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
35
        <div>
36
          {"I'll receive my-node-* classes"}
37
        </div>
38
      </CSSTransition>
39
      <button type="button" onClick={() => setInProp(true)}>
40
        Click to Enter
41
      </button>
42
    </div>
43
  );
44
}
45
```
46

47
## Architecture
48

49
React Transition Group is built around several key concepts:
50

51
- **State-Based Transitions**: Components track transition states (`entering`, `entered`, `exiting`, `exited`) over time
52
- **Lifecycle Callbacks**: Hooks for transition events (`onEnter`, `onEntering`, `onEntered`, `onExit`, `onExiting`, `onExited`)
53
- **Flexible Children**: Support for both function-as-children and element children patterns
54
- **Group Management**: Automatic coordination of multiple transitions in lists or groups
55
- **CSS Integration**: Seamless integration with CSS transitions and animations via class name management
56

57
## Capabilities
58

59
### Base Transition Component
60

61
Platform-agnostic base component for managing transition states over time. Provides the core state machine for all other transition components.
62

63
```javascript { .api }
64
function Transition({
65
  nodeRef,
66
  children,
67
  in: inProp,
68
  mountOnEnter,
69
  unmountOnExit,
70
  appear,
71
  enter,
72
  exit,
73
  timeout,
74
  addEndListener,
75
  onEnter,
76
  onEntering,
77
  onEntered,
78
  onExit,
79
  onExiting,
80
  onExited,
81
  ...otherProps
82
}): JSX.Element;
83

84
// State constants
85
const UNMOUNTED = 'unmounted';
86
const EXITED = 'exited';
87
const ENTERING = 'entering';
88
const ENTERED = 'entered';
89
const EXITING = 'exiting';
90
```
91

92
[Base Transition](./transition.md)
93

94
### CSS Transitions
95

96
CSS class-based transition component that applies CSS classes during different transition phases. Built upon the base Transition component with additional CSS class management.
97

98
```javascript { .api }
99
function CSSTransition({
100
  classNames,
101
  onEnter,
102
  onEntering,
103
  onEntered,
104
  onExit,
105
  onExiting,
106
  onExited,
107
  ...transitionProps
108
}): JSX.Element;
109
```
110

111
[CSS Transitions](./css-transition.md)
112

113
### Transition Groups
114

115
Manages a set of transition components in a list, automatically handling mounting and unmounting of list items with proper transition coordination.
116

117
```javascript { .api }
118
function TransitionGroup({
119
  component,
120
  children,
121
  appear,
122
  enter,
123
  exit,
124
  childFactory,
125
  ...otherProps
126
}): JSX.Element;
127
```
128

129
[Transition Groups](./transition-group.md)
130

131
### Switch Transitions
132

133
Controls transitions between two states with different sequencing modes, inspired by Vue.js transition modes for controlled component switching.
134

135
```javascript { .api }
136
function SwitchTransition({
137
  mode, // 'out-in' | 'in-out'
138
  children
139
}): JSX.Element;
140
```
141

142
[Switch Transitions](./switch-transition.md)
143

144
### Replace Transitions
145

146
Specialized transition component that animates between exactly two children, useful for controlled switching between two specific components.
147

148
```javascript { .api }
149
function ReplaceTransition({
150
  in: inProp,
151
  children, // Must be exactly two transition components
152
  onEnter,
153
  onEntering,
154
  onEntered,
155
  onExit,
156
  onExiting,
157
  onExited,
158
  ...otherProps
159
}): JSX.Element;
160
```
161

162
[Replace Transitions](./replace-transition.md)
163

164
## Global Configuration
165

166
The config object allows global control over all transitions in the application.
167

168
```javascript { .api }
169
import { config } from 'react-transition-group';
170

171
/**
172
 * Global configuration object for controlling transition behavior
173
 */
174
const config = {
175
  /** Globally disable all transitions when set to true */
176
  disabled: boolean;
177
};
178
```
179

180
Set `config.disabled = true` to disable all transitions globally, useful for testing or accessibility preferences. When disabled, all transition components will skip animations and immediately apply final states.
181

182
## Common Types
183

184
```javascript { .api }
185
// Timeout configuration
186
type Timeout = number | {
187
  appear?: number;
188
  enter?: number;
189
  exit?: number;
190
};
191

192
// CSS class name configuration
193
type ClassNames = string | {
194
  appear?: string;
195
  appearActive?: string;
196
  appearDone?: string;
197
  enter?: string;
198
  enterActive?: string;
199
  enterDone?: string;
200
  exit?: string;
201
  exitActive?: string;
202
  exitDone?: string;
203
};
204

205
// Node reference for direct DOM access
206
type NodeRef = React.RefObject<HTMLElement>;
207

208
// Transition lifecycle callbacks (node is undefined when nodeRef is used)
209
type TransitionCallback = (node?: HTMLElement, isAppearing?: boolean) => void;
210
type EndListenerCallback = (node: HTMLElement, done: () => void) => void;
211
```