How to Create Reusable Modal Dialog Component in React

React responsive modal dialog component tutorial; Modal dialogs provide a facile way to show important information to the users; this user interface component doesn’t hamper user experience rather keeps the aesthetics intact and manages to share essential data with effect from communicating with site visitors.

Well, In this tutorial, we are going to reveal how to create modal popover or modal overlay in react application with the help of react-modal package. So, if you don’t know how to build this essential functionality, fret not; we have got you covered.

Moreover, this is not rocket science to build modal popover in react; rather it requires some steps to be taken seriously. So, yes, the react-modal library plays a crucial role in integrating modal dialog in react application.

Implementing modal dialog is no more the pain due to react-modal APIs and support; just install it in the react and start creating modal popover in react environment. When it comes to adding a new feature directly, visit here.

How to create modal component in React

  • Step 1: Create New React Project
  • Step 2: Install React Modal Package
  • Step 3: Create New Component
  • Step 4: Implement Modal in React
  • Step 5: Spruce Up Modal with CSS
  • Step 6: Start React Application

Create New React Project

Let’s break the ice and focus on the first point to commence the installation of the new react app. At the same time, get into the project folder.

npx create-react-app react-demo
cd react-demo

Install React Modal Package

A journey of a thousand miles begins with a single step…

We know the gravitas of requirement; consequently, we start adding the react-modal package into the react app.

npm install react-modal

Create New Component

The primary idea revolves around creating a reusable component; let us create a ‘components’ folder in the src folder.

Immediately after creating a new file, name it modal.component.js file, and this file will be considered the most important prodigy of this guide.

After forming the modal component, get inside the src/App.js and register the modal component and invoke it.

import React from 'react';
import './App.css';

import ModalComponent from './components/modal.component';

function App() {
  return (
    <div className="App">
        <ModalComponent/>
    </div>
  );
}

export default App;

You don’t have to move heaven and earth to do this. Don’t you?

Implement Modal in React

In this step, you need to import the Modal plugin, define the button, attach the onClick event handler to trigger the method which has to be defined with effect from Modal directive.

Open and update the components/modal.component.js file.

import React, { useState } from "react";
import Modal from "react-modal";

function ModalComponent() {
    
      const [isOpen, setIsOpen] = useState(false);

      function openModal() {
        setIsOpen(!isOpen);
      }

      return (
        <div>
          <button onClick={openModal}>Display modal</button>

          <Modal
            className="custom_modal"
            overlayClassName="custom_overlay"                
            onRequestClose={openModal}
            contentLabel="Tiny nomadic modal popover"
            isOpen={isOpen}>
            <div>React modal dialog component.</div>
            <button onClick={openModal}>Close </button>
          </Modal>
        </div>
      );
    

}

export default ModalComponent;

Spruce Up Modal with CSS

Default modal dialog doesn’t come with any styling, but we can spruce up the look and feel of the modal overlay by adding the CSS in the src/App.css file; these CSS classes have already been defined.

body, html {
    margin: 0;
    padding: 0;
}

.custom_modal {
    top: 50%;
    left: 50%;
    outline: none;
    padding: 25px;
    overflow: auto;
    position: fixed;
    border-radius: 3px;
    transform: translate(-50%, -50%);
    background: rgb(236, 233, 233);    
  }
  
  .custom_overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;    
    background-color: rgba(0, 0, 0, 0.78);
}

Start React Application

In the final part, we need to start the app using the default npm start command. Make sure to execute the command to start the app.

npm start

Conclusion

The react modal dialog tutorial is over; we talked about every aspect of creating a responsive modal overlay in react app.