How To Create Modal Component in React

in this tutorial, We’ll learn how to build an outstanding reusable modal component with React from the scratch. A modal box can be used to display a message, notification, or a user-input HTML form.

We will create a react modal component using pure CSS. We’ll integrate a modal component in reactjs.

There are a lot of third-party modal libraries out there, but I’m going to make my own. The modal is a common user interface element in web applications. In this react lesson, we’ll develop and learn the following functionalities:

Create a React App using npx
Create Modal Component in react with a header, footer and close button.
We will use the Stateful component and passed data from the parent component to the child component.
Create a modal box without any libs using pure css.

You can also manage to react state using redux, I have also shared Getting Started With React Redux Using React

Checkout Other tutorials:

Example of Modal Component in Reactjs

Let’s begin with creating a fresh react application using the below command.

npx create-react-app modal-react-component

Lets’ create src/Modal.js file and add the below code into this file. We will create a Modal component and export it.

import React, { Component }  from 'react';
export default class Modal extends React.Component {

	render() {
		const { handleClose, desc, show, header, footer  } = this.props
		const showHideClassName = show ? 'show-div' : 'hide-div';
		console.log(this.props);
      return (

<div classname="{showHideClassName}">

<div id="myModal" classname="modal">


<div classname="modal-content">

<div classname="modal-header">
			      <span classname="close" onclick="{this.props.handleClose}">×</span>

<h2>{header}</h2>

</div>


<div classname="modal-body">
			    	
{desc}
 
Lorem Ipsum is simply dummy text
			    	of the printing and typesetting industry. Lorem
			    	Ipsum has been the industry's standard dummy text
			    	ever since the 1500s, when an unknown printer took
			    	a galley of type and scrambled it to make a type
			    	specimen book. It has survived not only five
			    	centuries, but also the leap into electronic
			    	typesetting, remaining essentially unchanged. It
			    	was popularised in the 1960s with the release of
			    	Letraset sheets containing Lorem Ipsum passages,
			    	and more recently with desktop publishing software
			    	like Aldus PageMaker including versions of Lorem
			    	Ipsum.


          </div>
         <div classname="modal-footer">
         <h3>{footer}</h3>

       </div>
     </div>
   </div>
</div>

	  );
    }	
}

We will get some state and props from the parent component –

handleClose: This is the event handler to handle a close modal event and set the state to hide and show modal.
desc: This is modal box body content.
show: This variable contains a modal state.
header: The content that will display the modal header section.
footer: The content that will display the modal footer section.

Let’s add some CSS into app.css file –

.modal { /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #451b04;
    color: white;
}

.modal-body {padding: 20px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #451b04;
    color: white;
}
.display-block {
  display: block;
}

.display-none {
  display: none;
}

We’ve created the modal component and are ready to go on to the next phase, which is to combine it with app.js, which is our main component and is responsible for passing states.

Open the app.js file and paste the following code into it:

import React from 'react';
import ReactDOM from "react-dom";

import './App.css';
import Modal from './Modal';


class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      show: false,
      header: "I am Header",
      footer: "I am Footer",
      desc: "Hello! I am modal box"
     };

  }
 
  showModal = () =&gt; {
    this.setState({ show: true });
  };

  hideModal = () =&gt; {
    this.setState({ show: false });
  };

  render() {
      return (

			<div>

			<h1>React Modal</h1>

			  <modal show="{this.state.show}" handleclose="{this.hideModal}" header="{this.state.header}" footer="{this.state.footer}" desc="{this.state.desc}">
				
			  </modal>

			  <button type="button" onclick="{this.showModal}">
				open
			  </button>
			</div>

      );
    }
}

export default App;

First, I’ve added a Modal component at the top of the file. We have set the state into the react constructor method. A handler function was also written to hide and show the modal box. The showModal event handler is used in the app.js file whereas, The hideModal handler function is passed to the child component ie. Modal.

The Modal box is used in render funtion, The required parameters are passed to the Modal component.

Example of Modal Component in Reactjs

Related

Leave a Reply Cancel reply