tessl/npm-react-addons-transition-group
Legacy React addon that provides TransitionGroup component functionality as a compatibility layer to react-transition-group
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
React Addons Transition Group
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.
Package Information
- Package Name: react-addons-transition-group
- Package Type: npm
- Language: TypeScript/JavaScript
- Installation:
npm install react-addons-transition-group
Core Imports
// CommonJS (primary pattern)
const TransitionGroup = require('react-addons-transition-group');// ES6 modules
import TransitionGroup from 'react-addons-transition-group';TypeScript:
import TransitionGroup from 'react-addons-transition-group';
import type { TransitionGroupProps } from 'react-addons-transition-group';Basic Usage
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
class TodoList extends React.Component {
render() {
return (
<TransitionGroup component="ul">
{this.props.items.map(item => (
<TodoItem key={item.id} item={item} />
))}
</TransitionGroup>
);
}
}Architecture
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:
module.exports = require('react-transition-group/TransitionGroup');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.
Migration Note
This package is deprecated. The modern equivalent is:
// Modern replacement
import TransitionGroup from 'react-transition-group/TransitionGroup';Capabilities
TransitionGroup Component
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.
/**
* TransitionGroup component for managing enter/leave animations
* This is a direct re-export of react-transition-group/TransitionGroup
* API is identical to react-transition-group@1.2.0
*/
const TransitionGroup: React.ComponentType<TransitionGroupProps>;Props
interface TransitionGroupProps {
/**
* The component to render as the container element
* Can be a string (HTML element) or React component
* @default 'span'
*/
component?: string | React.ComponentType<any>;
/**
* Function to wrap each child before rendering
* Used to apply additional transition logic
* @default (child) => child
*/
childFactory?: (child: React.ReactElement) => React.ReactElement;
/**
* Child components to manage transitions for
* Children must have unique keys for proper tracking
*/
children?: React.ReactNode;
}Usage Examples
Basic List Management:
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
class ItemList extends React.Component {
constructor(props) {
super(props);
this.state = { items: [] };
this.addItem = this.addItem.bind(this);
this.removeItem = this.removeItem.bind(this);
}
addItem() {
this.setState(function(prevState) {
return {
items: prevState.items.concat([{ id: Date.now(), text: 'New Item' }])
};
});
}
removeItem(id) {
this.setState(function(prevState) {
return {
items: prevState.items.filter(function(item) {
return item.id !== id;
})
};
});
}
render() {
var self = this;
return (
<div>
<button onClick={this.addItem}>Add Item</button>
<TransitionGroup component="ul">
{this.state.items.map(function(item) {
return (
<li key={item.id}>
{item.text}
<button onClick={function() { self.removeItem(item.id); }}>Remove</button>
</li>
);
})}
</TransitionGroup>
</div>
);
}
}Custom Container Component:
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
var CustomContainer = React.createClass({
render: function() {
return React.createElement('div', {
className: this.props.className
}, this.props.children);
}
});
var App = React.createClass({
render: function() {
return (
<TransitionGroup component={CustomContainer} className="item-container">
<div key="item1">Item 1</div>
<div key="item2">Item 2</div>
</TransitionGroup>
);
}
});Child Factory for Custom Wrapping:
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
var App = React.createClass({
childFactory: function(child) {
// Wrap each child with additional props or components
return React.cloneElement(child, {
className: 'transition-item'
});
},
render: function() {
return (
<TransitionGroup childFactory={this.childFactory}>
<div key="a">Item A</div>
<div key="b">Item B</div>
</TransitionGroup>
);
}
});Implementation Details
This package is implemented as a simple re-export:
module.exports = require('react-transition-group/TransitionGroup');The actual TransitionGroup implementation comes from react-transition-group@1.2.0, which provides:
- Child component lifecycle management
- Enter/leave transition coordination
- Key-based component tracking
- Integration with CSS transitions and animations
Dependencies
- Runtime:
react-transition-group@^1.2.0 - Peer:
react@^15.4.2
Error Handling
The TransitionGroup component will throw errors in the following cases:
- When children don't have unique keys (React requirement)
- When used with incompatible React versions
- When the underlying react-transition-group dependency is missing
Migration Path
This package is a compatibility layer. For new projects, use:
// Instead of
import TransitionGroup from 'react-addons-transition-group';
// Use
import TransitionGroup from 'react-transition-group/TransitionGroup';The API is identical, making migration straightforward.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Publish Source
- CLI
- Badge
