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
```