Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-transition-group

reactjs42.9mBSD-3-Clause4.4.5TypeScript support: definitely-typed

A react component toolset for managing animations

react, transition, addons, transition-group, animation, css, transitions

readme

react-transition-group npm

ATTENTION! To address many issues that have come up over the years, the API in v2 and above is not backwards compatible with the original React addon (v1-stable).

For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release. Documentation and code for that release are available on the v1-stable branch.

We are no longer updating the v1 codebase, please upgrade to the latest version when possible

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

Documentation

TypeScript

TypeScript definitions are published via DefinitelyTyped and can be installed via the following command:

npm install @types/react-transition-group

Examples

Clone the repo first:

git@github.com:reactjs/react-transition-group.git

Then run npm install (or yarn), and finally npm run storybook to start a storybook instance that you can navigate to in your browser to see the examples.

changelog

4.4.5 (2022-08-01)

Bug Fixes

  • apply entering animation synchronously when unmountOnExit or mountOnEnter is enabled (#847) (1043549)

4.4.4 (2022-07-30)

Bug Fixes

4.4.3 (2022-07-30)

Bug Fixes

  • enter animations with mountOnEnter or unmountOnExit (#749) (51bdceb)

4.4.2 (2021-05-29)

Bug Fixes

  • nodeRef prop type for cross-realm elements (#732) (8710c01)

4.4.1 (2020-05-06)

Bug Fixes

4.4.0 (2020-05-05)

Features

  • add nodeRef alternative instead of internal findDOMNode (#559) (85016bf)

    • react-transition-group internally uses findDOMNode, which is deprecated and produces warnings in Strict Mode, so now you can optionally pass nodeRef to Transition and CSSTransition, it's a ref object that should point to the transitioning child:

      import React from "react"
import { CSSTransition } from "react-transition-group"

const MyComponent = () => {
  const nodeRef = React.useRef(null)
  return (
    <CSSTransition nodeRef={nodeRef} in timeout={200} classNames="fade">
      <div ref={nodeRef}>Fade</div>
    </CSSTransition>
  )
}

      Bug Fixes

  • set the values of constants attached to Transition to match the exported ones (#554)

4.3.0 (2019-09-05)

Features

4.2.2 (2019-08-02)

Bug Fixes

  • Fix imports to play nicely with rollup (#530) (3d9003e)

4.2.1 (2019-07-02)

Bug Fixes

  • updated SwitchTransition component to be default export and exported from index.js (#516) (cfd0070)

4.2.0 (2019-06-28)

Features

4.1.1 (2019-06-10)

Bug Fixes

4.1.0 (2019-05-30)

Features

  • add global transition disable switch (#506) (4c5ba98)

4.0.1 (2019-05-09)

Bug Fixes

  • issue with dynamically applied classes not being properly removed for reentering items (#499) (129cb11)

4.0.0 (2019-04-16)

Features

BREAKING CHANGES

  • in environments where esm is supported importing from commonjs requires explicitly adding the .default after require() when resolving to the esm build

3.0.0 (2019-04-15)

Features

BREAKING CHANGES

  • use new style react context
// package.json
-"react": "^15.0.0",
+"react": "^16.6.0",
-"react-dom": "^15.0.0", 
+"react-dom": "^16.6.0",

2.9.0 (2019-04-06)

Features

Reverts

  • bump semantic release dependencies (1bdcaec)

2.8.0 (2019-04-02)

Features

2.7.1 (2019-03-25)

Bug Fixes

  • revert tree-shaking support because it was a breaking change (271364c)

2.7.0 (2019-03-22)

Features

2.6.1 (2019-03-14)

Bug Fixes

  • Transition: make exit key optional when passing an object to the timeout prop (#464) (3a4cf9c)
  • package.json: mark react-transition-group as side-effect free for webpack tree shaking (#472) (b81dc89)

2.6.0 (2019-02-26)

Features

2.5.3 (2019-01-14)

Bug Fixes

  • strip custom prop-types in production (#448) (46fa20f)

2.5.2 (2018-12-20)

Bug Fixes

2.5.1 (2018-12-10)

Bug Fixes

  • prevent calling setState in TransitionGroup if it has been unmounted (#435) (6d46b69)

2.5.0 (2018-09-26)

Features

  • update build and package dependencies (#413) (af3d45a)

2.4.0 (2018-06-27)

Features

  • remove deprecated lifecycle hooks and polyfill for older react versions (c1ab1cf)

Performance Improvements

  • don't reflow when there's no class to add (d7b898d)

2.3.1 (2018-04-14)

Bug Fixes

  • deps: Move loose-envify and semantic-release to devDependencies (#319) (b4ec774)

v2.3.0

2018-03-28

  • Added *-done classes to CSS Transition (#269)
  • Reorganize docs with more interesting examples! (#304)
  • A bunch of bug fixes

v2.2.1

2017-09-29

  • Patch: Allow React v16 (#198)

v2.2.0

2017-07-21

  • Feature: Support multiple classes in classNames (#124)
  • Docs: fix broken link (#127)
  • Bugfix: Fix Transition props pass-through (#123)

v2.1.0

2017-07-06

  • Feature: Add back childFactory on <TransitionGroup> (#113)
  • Bugfix: Ensure child specified onExited fires in a <TransitionGroup> (#113)

v2.0.2

2017-07-06

  • Fix documentation npm: No code changes

v2.0.1

2017-07-06

  • Fix documentation on npm: No code changes

v2.0.0

2017-07-06

[v1.2.0]

2017-06-12

  • Feature: Dist build now includes both production and development builds (#64)
  • Feature: PropTypes are now wrapped allowing for lighter weight production builds (#69)

v1.1.3

2017-05-02

  • bonus release, no additions

v1.1.2

2017-05-02

  • Bugfix: Fix refs on children (#39)

v1.1.1

2017-03-16

  • Chore: Add a prebuilt version of the library for jsbin and the like.

v1.1.0

2017-03-16

  • Feature: Support refs on children (#9)
  • Feature: TransitionChild to passes props through (#4)
  • Bugfix: Fix TransitionGroup error on quick toggle of components (#15)
  • Bugfix: Fix to work enter animation with CSSTransitionGroup (#13)