Author avatar

Vivek Kumar

Creating a React Modal with Transitions

Vivek Kumar

  • Jul 29, 2019
  • 6 Min read
  • 30 Views
  • Jul 29, 2019
  • 6 Min read
  • 30 Views
Web Development
React

Introduction

Most of us usually believe that the creation of a standard React Modal transition can be attained with surface-level knowledge of React.JS animation. Yes, if you are creating the modal as a basic source of learning, you can negotiate with a certain amount of trial and error to get the practical result for better understanding. But if you are thinking of creating a standard React modal transition with a glimpse of professional value then there are many things that you need to take care of. Yes, of course, more than a basic insight of animation is necessary but it is your standard modal outcome that eventually decides how proficient you have (or can) become in building the modal framework.

This guide is, basically, going to revolve around the basic insight of building a React modal transition. We are going to talk about the basic structure, the installation process, how the commands of the usage actually take place, what the standard props are that can be applied, and what general animation types are incorporated, in order to form a standard react modal.

By the time you complete the examples from this guide, it is fully anticipated that you will be proficient in not only with the creation of the React modal but also in working certain transitions into it. Now with that, let us proceed!

The Creation of Rodal

Rodal is a term that is used to describe a React Modal that is comprised of basic animations. In order to understand the basic approach of creating the modal, it would be best for us to have a glance at what a basic React modal transition is going to look like.

Head over to the Rodal webpage to test the basic dynamics of Rodal like zoom, fade, flip, etc.

Installation

The installation process can take place in a simple format, as mentioned below:

For React 15/16

npm i rodal --save

For React 0.14

npm i [email protected] --save

Usage

The application of Rodal is one of the most crucial steps that we are going to follow. Here, we are first required to import React and Rodal from the ‘react’ and ‘rodal’ folders. Thereafter, we can incorporate styles as per our needs and convenience from the style library.

In addition to the styles, the props which are necessary for the modal can be chosen in the program commands and the state can be set to visible or hidden, as per your requirements. Then, the rendering process can be started. Just have a look at the commands that are required to be used for a better understanding of the scheme of things.

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
31
32
33
import React from 'react';
import Rodal from 'rodal';
 
// include styles
import 'rodal/lib/rodal.css';
 
class App extends React.Component {
 
    constructor(props) {
        super(props);
        this.state = { visible: false };
    }
 
    show() {
        this.setState({ visible: true });
    }
 
    hide() {
        this.setState({ visible: false });
    }
 
    render() {
        return (
            <div>
                <button onClick={this.show.bind(this)}>show</button>
 
                <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>
                    <div>Content</div>
                </Rodal>
            </div>
        )
    }
}
javascript

The following are the props that are typically used in a React modal transition. In the below-mentioned table, we are highlighting the props with their respective property, type of function, default, and the description.

PropertyTypeDefaultDescription
Widhtnumber400width of dialog
Heightnumber240height of dialog
Measurestringpxmeasure of width and height
onClosefunc/handler called onClose of modal
onAnimationEndfunc/handler called onEnd of animation
visibleboolfalsewhether to show dialog
showMaskbooltruewhether to show mask
closeOnEscboolfalsewhether close dialog when esc pressed
closeMaskOnClickbooltruewhether close dialog when mask clicked
showCloseButtonbooltruewhether to show close button
animationstringzoomanimation type
enterAnimationstring/enter animation type (higher order than 'animation')
leaveAnimationstringleave animation type (higher order than 'animation')
durationnumber300animation duration
classNamestring/className for the container
customStylesobject/custom styles
customMaskStylesobject/custom mask styles

The Animation Types in React Modal Transition

Given below are the available animation types in react modal transition:

  • Zoom
  • flip
  • fade
  • rotate
  • door
  • slideDown
  • slideUp
  • slideRight
  • slideLeft

Conclusion

With the completion of this guide, I believe that you can easily create a React modal transition and ensure that it works for you in a perfect fashion. This guide has not only demonstrated the appearance of a React modal (Rodal) but also shed some light on the installation and usage process along with the required commands. The props and the animation styles that you can easily access in the React library have also been enlisted in the guide for your convenience.

This guide has focused on simple yet important and effective steps to ensure that you do not fumble at any step and complete the entire process of modal structuring and transition effortlessly. So go ahead, and get on with it!

References

While writing this guide, the following resources have been referred to:

0