migrate react-transition-group

react-transition-group has several important changes when upgrading from v1 to v4:

The CSSTransitionGroup component has been removed after the upgrade.
leave has become exit.
transitionName has been changed to classNames.
Properties like transitionEnterTimeout have become part of the timeout object.
transition{Appear, Enter, Leave} have been changed to appear, enter, exit.

If the following methods are used in the component, it becomes a bit more troublesome as they need to be removed manually:

componentWillAppear
componentDidAppear
componentWillEnter
componentDidEnter
componentWillLeave
componentDidLeave

If there are no strange hacks, you can also consider using jscodeshift for migration. If the component has become too large to migrate easily, you can create a wrapper that wraps the original props:

/**
 * NOTE:
 * This is temporary wrapper component for Transition.js,
 * It provides the same API as `CSSTransitionGroup` in v1
 */
import * as React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

type Props = {
  component?: React.ReactNode;
  transitionName: string;
  transitionEnterTimeout?: number;
  transitionExitTimeout?: number;
  transitionEnter?: boolean;
  transitionExit?: boolean;
  children: React.ReactNode,
};

const CSSTransitionGroup = ({
  transitionEnterTimeout= 0,
  transitionExitTimeout= 0,
  transitionEnter= true,
  transitionExit= true,
  transitionName,
  children,
  component,
}: Props) => {
  const transitionChildrenProps = {
    classNames: transitionName,
    timeout: { enter: transitionEnterTimeout, exit: transitionExitTimeout }
  };

  const transitions = React.Children.map(children, (child: any) => (
    <CSSTransition key={`transition-${child.key}`} {...transitionChildrenProps}>{child}</CSSTransition>
  ));

  return (
    <TransitionGroup
			component={component}
			enter={transitionEnter}
			exit={transitionExit}
 		>
      {transitions}
    </TransitionGroup>
  );
};

export default CSSTransitionGroup

With this wrapper, the migration can be painless. However, for easier maintenance, it is still recommended to gradually remove the deprecated code.