Working With Lists

react-reveal has added a support for react transition group 2.x! You can use react-reveal elements such as Fade, Zoom, etc inside of TransitionGroup component instead of native Transition or CSSTransition elements. There are number of advantages of using react-reveal instead of Transition elements such as no need of dealing with CSS any more, first class support for collapsing elements, rich suite of different easy to use effects and so on. Have a look at the live example of [todo app](/examples/advanced/todo/).

In order to use TransitionGroup with react-reveal you'll need to install react-transition-group first:

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

After that, you can import TransitionGroup and some effect from react-reveal:

import TransitionGroup from 'react-transition-group/TransitionGroup';
import Zoom from 'react-reveal/Zoom';

Put the TransitionGroup somewhere in your render method. For example, if you have a collection called items in your state and each item has a unique id field:

// This example is live editable ( yes, it *really* is )
// you can click somewhere in this code block and start editing it
// and the output will be displayed under the code
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {id: 1, text: 'First Item'},
        {id: 2, text: 'Another Item'},
        {id: 3, text: 'Last One'},
      ],
    };
  }
  render() {
    return (
      <TransitionGroup>
        {this.state.items.map( item =><Zoom key={item.id}>{item.text}</Zoom> )}
      </TransitionGroup>
    );
  }
}

As you modify items collection you should see entering or exiting animations. Have a look at the full example.

Most of Transition props are supported with the exceptions of callbacks.