How to Develop Custom Modal/Dialog Component in ReactJS

If you are familiar with React, It’s easy to create a reusable ReactJS Modal / Dialog component. This post will help you to create a reusable Modal in React. Create a React app using the following command.

create-react-app sampleapp

Note: if you don’t have create-react-app installed, install it using npm i -g create-react-app

Create a Modal folder in your src folder and inside the Modal folder create two files Modal.js and Modal.css.

Design Reusable ReactJS Modal / Dialog Component

Modal.js

import React, {Component} from 'react';
import './Modal.css';

class Modal extends Component {
   render() {
     return (<div className="Modal" style={{
               transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
               opacity: this.props.show ? 1 : 0
             }}>
               {props.children}
            </div>)
   }
}

export default Modal;

Modal.css

.Modal {
    position: fixed;
    z-index: 500;
    background-color: white;
    width: 70%;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px black;
    padding: 16px;
    left: 15%;
    top: 30%;
    box-sizing: border-box;
    transition: all 0.3s ease-out;
}

@media (min-width: 600px) {
    .Modal {
        width: 500px;
        left: calc(50% - 250px);
    }
}

The above CSS is used to make our div fixed in the layout. To show/hide the react modal component we are using show property in props object (props is used to share data from parent to child component).

Based on the value of show property, we change the opacity to 0 (hide) and 1 (show). We also change the transform: translateY() value for making little animation while showing the popup.

Inside the div, we interpolate props.children. The props.children is a special builtin property in React, which receives whatever is written in between the tags. In our case, <Modal>Some HTML</Modal> – props.childen carries the value of HTML or text node written in between the ReactJS Modal tag.

Adding our ReactJS Modal/Dialog to App Component

In our App component, Add react Modal component as follows

App.js

import React, { Component } from 'react';
import Modal from './Modal/Modal';

import './App.css';

class App extends Component {
  state = {
    show: false
  }

  showModal = () => {
    this.setState({ show: true})
  }

  hideModal = () => {
    this.setState({ show: false})
  }
 
  render () {
    return (
      <div>
         <Modal show={this.state.show} closed={this.hideModal}>
             <h2>Confirmation</h2>
             <div>Are you sure to delete?</div>
             <div className='btn-container'>
                <button className="btn" onClick={this.hideModal}>Cancel</button>
                <button className="btn">Delete</button>
             </div>
        </Modal>

        <button className="btn" onClick={this.showModal}>Open Modal</button>
      </div>
    );
  }
}

export default App;

App.css

.btn {
  outline: none;
  padding: 10px 20px;
  margin: 4px;
  background: #0089ce;
  border: 1px solid #dedede;
  color: #fff;
  transition: all .2s;
}

.btn:hover {
  background: #084c7f;
}

.btn-container {
  text-align: right;
}

In App Component, Import your ReactJS Modal component. Declare the react Modal component inside your render Method, whatever you pass in between the ReactJS Modal tags will be shown in Modal component. For brevity, I added a delete confirmation like dialog. You can also pass other components as well.

Initialize the state with show property which is used to show/hide the react modal / dialog. Declare two methods, showModal method is used to show the react Modal/Dialog by changing the show property to true in state. The hideModal method is used to hide the react Modal/Dialog by changing the show property value to false.

Add a button to show the react modal component. By default, the reactjs modal won’t get open because this.state.show is false at the beginning. Bind the showModal method to the button onClick event (onClick={this.showMoal}). Bind the hideModal method to the cancel button.

The ReactJS Modal component receives two properties from App component. The show property and closed property. The closed property is a function used to hide the react modal component, We have mainly used this closed property when the user clicks outside of the react Modal / Dialog. Let’s create the Backdrop Component.

Create a Backdrop Component

Now, we have a working reusable react Modal component but there’s one problem in design. We should also need to create a reusable backdrop component so that we can get a good user experience when the popup gets opened.

Create a folder inside the src folder as Backdrop. Inside the Backdrop folder, add two files Backdrop.js and Backdrop.css

import React from 'react';

import './Backdrop.css';

const backdrop = (props) => (
    props.show ? <div className="Backdrop" onClick={props.clicked}></div> : null
);

export default backdrop;

Backdrop.css

.Backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

The Backdrop component is a simple one with a div tag, All we need is the same props.show property which is used to show/hide the backdrop and props.clicked property which is a function to get triggered when the user clicks the backdrop. In our case, when the user clicks outside of react Modal (i.e, our Backdrop) we hide the reactjs Modal.

Add the Backdrop Component in Our ReactJS Modal Component

Import the Backdrop component in Modal component and then inside the render method wrap the entire thing with <> our code </> to enable adjacent JSX expressions. Then, Add the Backdrop component.

Modal.js

render() {
   return (
            <>
    <Backdrop show={this.props.show} clicked={this.props.closed} />
                <div
                    className="Modal"
                    style={{
                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.props.show ? '1' : '0'
                    }}>
                    {this.props.children}
                </div>
           </> 
         )
}

The Backdrop component will receive the show property and closed property from ReactJS Modal component which receives the properties from the App component.

That’s all it takes to build a reusable ReactJS Modal component with a backdrop. I hope, it helps you grasp the ideas.