React.js Custom Modal Example & Tutorial

React.js Custom Modal Example & Tutorial

In this article, I am going to create a demo for React.js custom modal. For this, I will use here react-modal NPM package...

React.js Custom Modal Example & Tutorial - In this article, I am going to create a demo for React.js custom modal. For this, I will use here react-modal NPM package...

There are so many other third-party libraries available today, Here I am going to use one of the very popular libraries.

Let's Get Started

Step 1: Create React App

create a very basic app of react.js by using below command over terminal.

create-react-app reactjs-custom-modal

Step 2: Create Modal Component

Create a folder inside src/ folder named modal. Now create two files inside this first modal.js and second, modal.css. Now open modal.js file and add below code in it.

import React from 'react';

import './modal.css';

const modal = (props) => {
return (
<div>
<div className="modal-wrapper"
style={{
transform: props.show ? 'translateY(0vh)' : 'translateY(-100vh)',
opacity: props.show ? '1' : '0'
}}>
<div className="modal-header">
<h2>Modal Header</h2>
<span className="close-modal-btn" onClick={props.close}>×</span>
</div>
<div className="modal-body">
<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">
<p>This is Modal footer</p>
</div>
</div>
</div>
)
}

export default modal;

Above, Modal component is a functional component which is receiving the contents as the children of the component. We are having 3 props for showing the modal, closing the modal and children for contents of the modal. Some CSS class has been added in HTML elements whose definition is written inside modal.css which I am going to explain just after it.

Now open the *modal.css *file and put below code inside it.

.modal-wrapper {
background: white;
border: 1px solid #d0cccc;
box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
margin: 100px auto 0;
transition: all .8s;
width: 60%;
border-radius: 10px;
}

.modal-header {
background: #e2e2e2;
height: 40px;
line-height: 40px;
padding: 5px 20px;
text-align: right;
}

.modal-header h2 {
float: left;
margin: 0;
padding: 0;
}

.modal-body {
padding: 10px 15px;
text-align: center;
height:200px;
}

.modal-footer {
background: #e2e2e2;
height: 35px;
padding: 15px;
}

.close-modal-btn {
color: white;
cursor: pointer;
float: right;
font-size: 30px;
margin: 0;
}

.close-modal-btn:hover {
color: black;
}

.btn-cancel {
background-color: #b71c1c;
float: left;
}

.btn-continue {
background-color: #1b5e20;
float: right;
}

.back-shed {
background-color: rgba(48, 49, 48, 0.42);
height: 100%;
position: fixed;
transition: all 1.3s;
width: 100%;
}

.open-modal-btn {
margin: 15px;
padding: 10px;
}

Step 3: Update App.js

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

class App extends Component {

  constructor() {
    super();

    this.state = {
      isShowing: false
    }
  }

  openModalHandler = () => {
    this.setState({
      isShowing: true
    });
  }

  closeModalHandler = () => {
    this.setState({
      isShowing: false
    });
  }

  render () {
    return (
      <div>

        { this.state.isShowing ? <div onClick={this.closeModalHandler} className="back-shed"></div> : null }

        <button className="open-modal-btn" onClick={this.openModalHandler}>Open Modal</button>

        <Modal
          className="modal"
          show={this.state.isShowing}
          close={this.closeModalHandler}>
        </Modal>
      </div>
    );
  }
}

export default App;

In the above code, At the top, we have imported the modal component and used in the render method with the values of the props passed to it. After that we can see two custom methods:

1. openModalHandler(): It sets the state of isShowing to true to open the modal.

2. closeModalHandler(): It sets the state of isShowing to false to close the modal.

After that, An onClick listener is passed to the div to controll the opening and closing the modal.

Step 4: Run the app

After all the previous steps, Run the app over terminal with npm start. A new tab will open with url http://locahost. A screen like below will open.

Conclusion

So in this demo, We learn to create custom modal in React.js with very simple steps. You can find other demos of React.js Sample Projects here


That’s all for now. Thank you for reading and I hope this demo will be very helpful to create React.js custom modal.

reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.