tessl/npm-react-addons-css-transition-group
CSS transition and animation add-on for React components entering or leaving the DOM
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
React CSS Transition Group
React CSS Transition Group provides CSS transition and animation capabilities for React components entering or leaving the DOM. It offers a high-level declarative API for common CSS animations using CSS classes applied automatically during component lifecycle transitions.
Package Information
- Package Name: react-addons-css-transition-group
- Package Type: npm
- Language: JavaScript (React 15.4.2)
- Installation:
npm install react-addons-css-transition-group
Core Imports
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';For ES5 with npm:
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');For ES5 with react-with-addons.js:
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;Basic Usage
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {items: ['hello', 'world', 'click', 'me']};
}
handleAdd() {
const newItems = this.state.items.concat(['new item']);
this.setState({items: newItems});
}
handleRemove(i) {
let newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
const items = this.state.items.map((item, i) => (
<div key={item} onClick={() => this.handleRemove(i)}>
{item}
</div>
));
return (
<div>
<button onClick={() => this.handleAdd()}>Add Item</button>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}
}Architecture
React CSS Transition Group is built around several key components:
- ReactCSSTransitionGroup: High-level component for declarative CSS transitions using class names
- ReactCSSTransitionGroupChild: Internal wrapper that handles individual child transitions and CSS class management
- CSS Convention System: Automatic CSS class application following naming patterns for enter/leave/appear transitions
- Timeout Management: Ensures DOM cleanup occurs after animation completion
- ReactTransitionGroup: Low-level base component (provided by React core) that manages component lifecycle
Capabilities
CSS Transition Group
High-level React component for easily implementing CSS transitions and animations when components enter or leave the DOM. Uses CSS classes applied at different lifecycle stages.
class ReactCSSTransitionGroup extends React.Component {
static propTypes: {
transitionName: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.shape({
enter: React.PropTypes.string,
enterActive: React.PropTypes.string,
leave: React.PropTypes.string,
leaveActive: React.PropTypes.string,
appear: React.PropTypes.string,
appearActive: React.PropTypes.string,
}),
]),
transitionAppear: React.PropTypes.bool,
transitionEnter: React.PropTypes.bool,
transitionLeave: React.PropTypes.bool,
transitionAppearTimeout: React.PropTypes.number,
transitionEnterTimeout: React.PropTypes.number,
transitionLeaveTimeout: React.PropTypes.number,
};
static defaultProps: {
transitionAppear: false,
transitionEnter: true,
transitionLeave: true,
};
}Types
// Transition name formats
type TransitionName = string | {
enter?: string;
enterActive?: string;
leave?: string;
leaveActive?: string;
appear?: string;
appearActive?: string;
};
// Legacy transition name format (also supported)
type LegacyTransitionName = {
enter: string;
leave: string;
active: string;
};- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Publish Source
- CLI
- Badge
