or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-addons-transition-group

Legacy React addon that provides TransitionGroup component functionality as a compatibility layer to react-transition-group

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-addons-transition-group@15.6.x

To install, run

npx @tessl/cli install tessl/npm-react-addons-transition-group@15.6.0

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.