This tutorial help to integrate modal component in reactjs. We will create modal component using pure css. The modal help to show message, notification or display HTML form for user inputs.



There are a lot of third party modal libs available, but I will create custom modal component.The modal is ubiquitous ui element into web application.We will create and learn following things into this react tutorial –

Create a React App Using npx

Create Modal Component in react with header, footer and close button.

We will use Stateful component and passed data from parent component to child component.

Create modal box without any libs using pure css.

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

Example of Modal Component in Reactjs

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



npx create-react-app modal-react-component.



Lets’ create src/Modal.js file and added below code into this file.We will create 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"> <p>{desc}</p> <p>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. </p> </div><div className="modal-footer"><h3>{footer}</h3> </div> </div> </div> </div> ); } } 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 34 35 36 37 38 39 40 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" > < p > { desc } < / p > < p > 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 . < / p > < / div > < div className = "modal-footer" > < h3 > { footer } < / h3 > < / div > < / div > < / div > < / div > ) ; } }

We will get some state and props from parent component –

handleClose : This is event handler to handle close modal event and set state to hide and show modal.

: This is event handler to handle close modal event and set state to hide and show modal. desc : This is modal box body content.

: This is modal box body content. show : This variable contains modal state.

: This variable contains modal state. header : The content that will display modal header section.

: The content that will display modal header section. footer : The content that will display 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; } 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 . 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 ; }

Created modal component and now move to next step, we will integrate modal with app.js , The App is our main component and responsible to pass states.

Open app.js file and added below code into this file –

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 = () => { this.setState({ show: true }); }; hideModal = () => { 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; 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 34 35 36 37 38 39 40 41 42 43 44 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 = ( ) = > { this . setState ( { show : true } ) ; } ; hideModal = ( ) = > { 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 have import Modal component into top of the file.We have set state into react constructor method.We also created handler function to hide and show modal box.The showModal event handler used into app.js file whereas, hideModal handler function passed to child component ie. Modal.

The Modal box used into render funtion, The required parameters passed to Modal component.