0
# React Addons Transition Group
1

2
React Addons Transition Group is a legacy compatibility package that provides the `TransitionGroup` component functionality. It serves as a bridge for applications migrating from the React addons pattern to the modern `react-transition-group` library, offering backward compatibility while encouraging migration to newer packages.
3

4
## Package Information
5

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

11
## Core Imports
12

13
```javascript
14
// CommonJS (primary pattern)
15
const TransitionGroup = require('react-addons-transition-group');
16
```
17

18
```javascript
19
// ES6 modules
20
import TransitionGroup from 'react-addons-transition-group';
21
```
22

23
TypeScript:
24

25
```typescript
26
import TransitionGroup from 'react-addons-transition-group';
27
import type { TransitionGroupProps } from 'react-addons-transition-group';
28
```
29

30
## Basic Usage
31

32
```javascript
33
import React from 'react';
34
import TransitionGroup from 'react-addons-transition-group';
35

36
class TodoList extends React.Component {
37
  render() {
38
    return (
39
      <TransitionGroup component="ul">
40
        {this.props.items.map(item => (
41
          <TodoItem key={item.id} item={item} />
42
        ))}
43
      </TransitionGroup>
44
    );
45
  }
46
}
47
```
48

49
## Architecture
50

51
This package is implemented as a simple re-export of the TransitionGroup component from `react-transition-group@1.2.0`. The entire implementation consists of:
52

53
```javascript
54
module.exports = require('react-transition-group/TransitionGroup');
55
```
56

57
This provides a compatibility layer for applications migrating from React's built-in addons system to standalone packages. The API is identical to `react-transition-group/TransitionGroup` - this package exists solely for backward compatibility.
58

59
## Migration Note
60

61
This package is deprecated. The modern equivalent is:
62

63
```javascript
64
// Modern replacement
65
import TransitionGroup from 'react-transition-group/TransitionGroup';
66
```
67

68
## Capabilities
69

70
### TransitionGroup Component
71

72
The TransitionGroup component manages the mounting and unmounting of child components with transition effects. This package provides a direct re-export of the TransitionGroup component from react-transition-group@1.2.0.
73

74
```typescript { .api }
75
/**
76
 * TransitionGroup component for managing enter/leave animations
77
 * This is a direct re-export of react-transition-group/TransitionGroup
78
 * API is identical to react-transition-group@1.2.0
79
 */
80
const TransitionGroup: React.ComponentType<TransitionGroupProps>;
81
```
82

83
#### Props
84

85
```typescript { .api }
86
interface TransitionGroupProps {
87
  /**
88
   * The component to render as the container element
89
   * Can be a string (HTML element) or React component
90
   * @default 'span'
91
   */
92
  component?: string | React.ComponentType<any>;
93
  
94
  /**
95
   * Function to wrap each child before rendering
96
   * Used to apply additional transition logic
97
   * @default (child) => child
98
   */
99
  childFactory?: (child: React.ReactElement) => React.ReactElement;
100
  
101
  /**
102
   * Child components to manage transitions for
103
   * Children must have unique keys for proper tracking
104
   */
105
  children?: React.ReactNode;
106
}
107
```
108

109
#### Usage Examples
110

111
**Basic List Management:**
112

113
```javascript
114
import React from 'react';
115
import TransitionGroup from 'react-addons-transition-group';
116

117
class ItemList extends React.Component {
118
  constructor(props) {
119
    super(props);
120
    this.state = { items: [] };
121
    this.addItem = this.addItem.bind(this);
122
    this.removeItem = this.removeItem.bind(this);
123
  }
124

125
  addItem() {
126
    this.setState(function(prevState) {
127
      return {
128
        items: prevState.items.concat([{ id: Date.now(), text: 'New Item' }])
129
      };
130
    });
131
  }
132

133
  removeItem(id) {
134
    this.setState(function(prevState) {
135
      return {
136
        items: prevState.items.filter(function(item) {
137
          return item.id !== id;
138
        })
139
      };
140
    });
141
  }
142

143
  render() {
144
    var self = this;
145
    return (
146
      <div>
147
        <button onClick={this.addItem}>Add Item</button>
148
        <TransitionGroup component="ul">
149
          {this.state.items.map(function(item) {
150
            return (
151
              <li key={item.id}>
152
                {item.text}
153
                <button onClick={function() { self.removeItem(item.id); }}>Remove</button>
154
              </li>
155
            );
156
          })}
157
        </TransitionGroup>
158
      </div>
159
    );
160
  }
161
}
162
```
163

164
**Custom Container Component:**
165

166
```javascript
167
import React from 'react';
168
import TransitionGroup from 'react-addons-transition-group';
169

170
var CustomContainer = React.createClass({
171
  render: function() {
172
    return React.createElement('div', {
173
      className: this.props.className
174
    }, this.props.children);
175
  }
176
});
177

178
var App = React.createClass({
179
  render: function() {
180
    return (
181
      <TransitionGroup component={CustomContainer} className="item-container">
182
        <div key="item1">Item 1</div>
183
        <div key="item2">Item 2</div>
184
      </TransitionGroup>
185
    );
186
  }
187
});
188
```
189

190
**Child Factory for Custom Wrapping:**
191

192
```javascript
193
import React from 'react';
194
import TransitionGroup from 'react-addons-transition-group';
195

196
var App = React.createClass({
197
  childFactory: function(child) {
198
    // Wrap each child with additional props or components
199
    return React.cloneElement(child, {
200
      className: 'transition-item'
201
    });
202
  },
203

204
  render: function() {
205
    return (
206
      <TransitionGroup childFactory={this.childFactory}>
207
        <div key="a">Item A</div>
208
        <div key="b">Item B</div>
209
      </TransitionGroup>
210
    );
211
  }
212
});
213
```
214

215
## Implementation Details
216

217
This package is implemented as a simple re-export:
218

219
```javascript
220
module.exports = require('react-transition-group/TransitionGroup');
221
```
222

223
The actual TransitionGroup implementation comes from `react-transition-group@1.2.0`, which provides:
224

225
- Child component lifecycle management
226
- Enter/leave transition coordination
227
- Key-based component tracking
228
- Integration with CSS transitions and animations
229

230
## Dependencies
231

232
- **Runtime**: `react-transition-group@^1.2.0`
233
- **Peer**: `react@^15.4.2`
234

235
## Error Handling
236

237
The TransitionGroup component will throw errors in the following cases:
238

239
- When children don't have unique keys (React requirement)
240
- When used with incompatible React versions
241
- When the underlying react-transition-group dependency is missing
242

243
## Migration Path
244

245
This package is a compatibility layer. For new projects, use:
246

247
```javascript
248
// Instead of
249
import TransitionGroup from 'react-addons-transition-group';
250

251
// Use
252
import TransitionGroup from 'react-transition-group/TransitionGroup';
253
```
254

255
The API is identical, making migration straightforward.