Author avatar

Vivek Kumar

Animating a ReactJS Component Using React-Transition-Group

Vivek Kumar

  • Jun 11, 2019
  • 9 Min read
  • 11 Views
  • Jun 11, 2019
  • 9 Min read
  • 11 Views
Web Development
React

Introduction

In the world of animation, it doesn’t matter whether we are talking about the beginners or the professional developers, most of them recognize the contribution of React Transition Group in their work. In this guide, you will learn how to use React Transition Group to animate a React JS component on rendering.

About React Transition Group

React Transition Group is one of the commonly used add-on components which were developed by the pros associated with the React JS community.

It is not merely because of the utility of this component but also the basic swiftness of the implementation of rudimentary CSS animations and transitions that makes it a hot choice. That is the reason why all classes of developers call this library “a specific set of components enabling the management of the component states (both mounting and unmounting) over a period of time, specially designed by taking the animation into account.”

Nonetheless, while implementing this add-on component there are certain things that you are required to keep a track of:

  1. When the component lifecycle gets modified, the React Transition Group also changes the classes.
  2. React Transition Group is a small packet add-on component and will not have much effect on the overall size of the bundle when installing for React JS applications. But as a developer, your preference may vary and you may prefer to go for the content delivery network (CDN).
  3. There are basically three components that comprise the React Transition Group. These include Transition, TransitionGroup, and CSSTransition. In order to avail the transition and animation results that you desire, you are required to bind the component in them.

In order to demonstrate the process of making a similar animation, refer to the image shown below:

User

The following points can be noted for the image:

  1. The button for the contact addition instruction can be used to include the n number of contacts in the list.
  2. Here, by simply clicking the icon the additional contacts can be added by the user.
  3. The contacts can be added until the number of name options set by the developer.
  4. The deletion of the added contacts can be simply done by the user by navigating the cursor to the close icon displayed at the far right of the dialogue box.
  5. On clicking of the close icon, it will simply remove the dialogue box and the existing name contact will be deleted from the list.

At the initial step, the developer is required to import CSSTransitionGroup from react-transition-group. Thereafter, the wrapping of the list is required to be done and set it with transitionName props. Please note that in a case if the child in CSSTransitionGroup is incorporated or removed, it will avail the animation styles.

1
2
3
<CSSTransitionGroup transitionName = "example" >
	{items}
</ CSSTransitionGroup>
javascript

Do note that when you set transitionName = "example" props, the classes that are existing in the style sheets should commence with an example name.

React Transition Group Application: When and How?

It is true that all kinds of animation can be executed on CSS, but after reaching a specific level of complexity it is hard to maintain the transition.

React Transition Group is a sort of application programming interface on which the React CSS Transition Group is created. One of the key distinctions between the two sorts of animations is that React Transition Group is written in JavaScript rather than CSS. Additionally, a typical callback is rendered to be invoked when the transition is successfully executed rather than depending on the CSS transition events.

Proceeding with a Simple Step

Firstly, let’s commence with a page which comprises of div which is provisionally shown on the grounds of flag shouldShowBox, and then attend the transition groups separately.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react';
import { render } from 'react-dom';

class Page extends React.Component {
  state = {
    shouldShowBox: true
  };

  toggleBox = () => {
    this.setState({
      shouldShowBox: !this.state.shouldShowBox
    });
  };

  render () {
    return <div className = "page" >

      { this.state.shouldShowBox && <div className="box" /> }

      <button
        className = "toggle-btn"
        onClick = {this.toggleBox}
      >
        toggle
      </ button>
    </ div>;
  }
}

render(<Page/>, document.querySelector('#container'));
javascript

When shouldShowBox = true then .box visible; and at the time when it is false, it will not be visible.

Including React Transition Group

The installation of react-addons-transition-group:

1
npm install react-addons-transition-group
bash

Then import the concerned file as:

1
import TransitionGroup from 'react-addons-transition-group';
javascript

After that, include TransitionGroup to render our ‘Page’ component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// ...
  render () {
    return <div className = "page" >

      <TransitionGroup >
        { this.state.shouldShowBox && <div className = "box" />}
      </ TransitionGroup>

      <button
        className = "toggle-btn"
        onClick = {this.toggleBox}
      >
        toggle
      </ button>
    </ div>;
  }
// ...
javascript

Do note that, in order to enable the flexibility of the components within the TransitionGroup, the group will not ascertain the animation itself. Rather than that, it will communicate with the analogous enter or leave transition hooks belonging to its child components when the specific child component is included or eliminated.

A couple of concerned lifecycle hooks are as follows:

  1. componentWillEnter(callback): It is concerned with the components that are included in a current TransitionGroup, and simultaneously as the component’s componentDidMount. It is not associated with the foremost render of the complete TransitionGroup (for instance, when a specific page is loaded in the beginning), here, it is highlighted via componentWillAppear.
  2. componentWillLeave(callback): It is concerned with the components that are eliminated from a TransitionGroup. The hook is simply termed as before componentWillUnmount, and componentWillUnmount will not trigger until the point when callback is happening.

A word of caution It is imperative to call all the rendered callbacks from the point where the animation gets completed. If it is not done then the concerned component will make access but will not leave or vice versa.

Basically, this is because of the fact that ReactTransitionGroup is usually dependent on the concerned hooks to exist, and the specific div cannot define the functioning of the hooks. So, it is essential for the developer to initially make the starting move <div className = ”box” /> to its own segment.

1
2
3
4
5
class Box extends React.Component {
  render () {
    return <div className = "box" />;
  }
}
javascript

After the completion of this step, the hooks of the animation lifecycle can be added. Here, in order to complete the animation, it is recommended to go for TweenMax from GSAP.

For users who are not familiar with TweenMax, the function signature mentioned below will help to understand the basics:

1
2
TweenMax.fromTo( target:Object, duration:Number, 
fromVars:Object, toVars:Object ):TweenMax

Now it can be easily defined as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Box extends React.Component {
  componentWillEnter (callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
  }

  componentWillLeave (callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {y: 0, opacity: 1}, {y: -100, opacity: 0, onComplete: callback});
  }

  render () {
    return <div className = "box" ref = {c => this.container = c} />;
  }
}
javascript

The program will help you with the basic application of ReactTransitionGroup.

Conclusion

In this guide, you've learned how to animate a React JS component on Render with the help of ReactTransitionGroup. It enables you to access the result which is made up of trustworthy add-on components with a stable style animation that will run without a glitch on any known platform. Try to add your own expertise and logic and don’t hesitate to experiment. No one can deny the fact that, no matter how much we expand the utilization of a reliable add-on component, there is always scope for improvement in existence.

0