react-transition-group has several important changes when upgrading from v1 to v4:
- The
CSSTransitionGroupcomponent has been removed after the upgrade. leavehas becomeexit.transitionNamehas been changed toclassNames.- Properties like
transitionEnterTimeouthave become part of thetimeoutobject. transition{Appear, Enter, Leave}have been changed toappear,enter,exit.
If the following methods are used in the component, it becomes a bit more troublesome as they need to be removed manually:
componentWillAppearcomponentDidAppearcomponentWillEntercomponentDidEntercomponentWillLeavecomponentDidLeave
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 CSSTransitionGroupWith this wrapper, the migration can be painless. However, for easier maintenance, it is still recommended to gradually remove the deprecated code.
