ReactJS Transition Group: react-transition-group With Example

When you create an app, it’s imperative that you make it interactive. Animation plays a crucial role in adding aesthetics to an application.

With the help of ReactJS Transition Group, transition of components in and out of the DOM can be done efficiently without or with minimum need for boilerplate code. It brings simple components for defining animations. The library does not define styles but instead manipulates the DOM in different useful ways. This further makes the implementation of transitions and animations much easier.

This approach to animations and transitions offered by React Transition Group is a more straightforward one.

To use the React Transition Group,

• Node version >=6 should be installed.

• Npm must have been installed in your machine.

npm install react-transition-group --save

Here’s how you can transition components in a project.

import { Transition } from 'react-transition-group';

The animation implemented through the React Transition Group is pure CSS Transitions. This means, the transition group in ReactJS does not need any property of JavaScript to animate the components. The animations can be easily accomplished by defining classes with different CSS styles.

Initially, React was only meant to be used to create web apps and therefore developers decided to keep other additional features such as animations separate. If you wish to use the Transition Group, you will need to install it separately.

There are three primary components in a React Transition group: Transition, CSSTransition and Transition Group.

React Transition Group consists only of components. It is required that you wrap the components within any of the existing components before implementing any animation.

The components of React Transition Group divide the lifecycle of other child components into specific stages. Developers can then choose to add specific classes in these stages for a time period called Timeout. The use of JavaScript ends here. Now developers can give different styles to the classes and add CSS Transitions for animation.