React-transition-group: Migration guide from 1.x?

[danqing]

The README points out that 2.x and 1.x are different. However, I can't find any document that describes how they are different, and what to do to migrate from 1.x to 2.x. While I understand that 1.x will still be maintained, I guess 2.x will be the future and a migration guide may help many users to move forward.

[jquense]

I haven't written a migration guide yet, but if you look at the v2 docs it's not to bad to see that's different

[williamboman]

Is there a changelog anywhere?

[PascalPixel]

Just a basic example of how to move from CSSTransitionGroup to a hand-made CSSTransition would be helpful

[virgofx]

@jquense Various other projects that have relied on stable react-transition-group (1.0) are now breaking because of the 2.0 NPM releases. There is no documentation on 2.0 to address upgrading or migration. Would it be possible to retag/re-release the 2.0.X versions to be beta such that those libraries who have react-transition-group as a peer dependency don't have to deal with the influx of issues now trying to lock down to a specific 1.2.0 version.

[jquense]

v2 is a major bump and clearly signals as a breaking change according to semver. No projects, properly configured should automatically get the new version unless they set an open range like >=1.0.0, that is really a bad idea to begin with and a problem with the library specifying the peer dep.

There is migration info incoming at #101 as well

[jharris4]

In case it helps anyone, I wrote a wrapper component that smoothed my transition from 1.x to 2.x:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

export default class CSSTransitionGroup extends PureComponent {
  static propTypes = {
    component: PropTypes.any,
    transitionName: PropTypes.string,
    transitionEnterTimeout: PropTypes.number,
    transitionExitTimeout: PropTypes.number,
    transitionEnter: PropTypes.bool,
    transitionExit: PropTypes.bool
  };

  static defaultProps = {
    transitionEnterTimeout: 0,
    transitionExitTimeout: 0,
    transitionEnter: true,
    transitionExit: true
  };

  render() {
    const { children, component, transitionName, transitionEnterTimeout, transitionExitTimeout, transitionEnter, transitionExit } = this.props;
    const transitionChildrenProps = {
      classNames: transitionName,
      timeout: { enter: transitionEnterTimeout, exit: transitionExitTimeout }
    };
    const transitionChildren = React.Children.map(children, child => (
      <CSSTransition key={`transition-${child.key}`} {...transitionChildrenProps}>{child}</CSSTransition>
    ));
    return (
      <TransitionGroup component={component} enter={transitionEnter} exit={transitionExit}>
        {transitionChildren}
      </TransitionGroup>
    );
  }
}

I need this wrapper, because I have a bunch of components that use react-transition-group, and take children with keys as arguments. The above code takes this into account, which may be useful for other people in the same situation.

[PascalPixel]

@jharris4 put in a PR, its good to have a wrapper at least!

[jquense]

Migration docs merged! Check the Readme for a link :)