How to Create Modal Popup in React JS (Free Code)

Simple Modal Popup in React Js

In this tutorial, we will learn how to create a modal popup using React js. Earlier we learned how to create a popup window using JavaScript.

React is a free and open-source front-end JavaScript library. To create this react js modal popup example you need to have some idea about react. React js is used to create most user interface components.

Before this, we created a modal popup using only Html and CSS. With it, I learned how to create different elements using the popup window. This reacts modal popup has to be opened manually by clicking on the button.

Simple Modal Popup in React Js

Model pop-ups are a common web element that we see on various websites. Every time we visit a web page we see such a pop-up after a certain period of time. 

Although in that case automatic pop-ups are used. However, this react js modal popup example is not automatic. It has to be opened by clicking on the button.


See the Pen Modal Popup in React JS by Shantanu Jana (@shantanu-jana) on CodePen.

Since this is a basic example of React modal, there is not much information here. The popup window contains some text and a cancel button. There is also a popup button which after clicking on it we will see a simple modal popup.

We have already discussed in an article how to create an automatic popup window using JavaScript. You can easily create a popup login form, popup registration form and email subscription form using this react js popup example.

Create a Simple Modal Pop-up with React

Now we will learn how to create this react popup form. If you want to know step by step then follow the tutorial below. However, if you want, you can download all the code using the button below the article.

As I said earlier, React is an open-source JavaScript library, so you have to use React's CDN link to activate the code.

Step 1: HTML code of React Modal Popup

The following codes are HTML codes. HTML is used a lot in the case of React. Here we will create all the elements in JavaScript using 'createElement'.


<div id="app"></div>

Step 2: CSS code of Popup window

We will design this project (modal popup in react js) using the following CSS codes. Although I haven't created any elements yet. Basically, you have to use the following CSS to design the element that we will create in React.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Fira Sans", sans-serif;
}

main {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(223, 223, 223);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-inner {
  position: relative;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  background-color: white;
}


button{
  background-color: rgb(7, 112, 177);
  padding: 15px 30px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
}

.popup-inner .close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: rgb(4, 77, 120);
  padding: 5px;
}

h3{
  text-align: center;
  font-size: 22px;
}

h6{
  font-weight: 500;
  font-size: 18px;
  margin: 20px;
  margin-top: 40px;
}

Step 3: Activate Modal Popup by React Js

Now we will activate this simple modal popup by react js. Here I have given all the reactions together. Although I've tried to explain all the code here. If you know Basic React js then you will have no problem understanding these codes.


const { useState } = React;

function Popup(props) {
  return props.trigger ? 
//createElement() method creates the HTML element specified by tagName
  React.createElement("div", { className: "popup" }, 
  React.createElement("div", { className: "popup-inner" }, 
  React.createElement("button", { className: "close-btn", onClick: () => props.setTrigger(false) }, "close"),
  props.children)) :

  null;
}



function App(props) {
//useState is a Hook that allows you to have state variables in functional components
  const [popup, setPopup] = useState(false);

  return (
//Different Elements of the Popup Window
    React.createElement("div", null, 
    React.createElement("main", null, 
    React.createElement("br", null), 
    React.createElement("button", { onClick: () => setPopup(true) }, "Open Popup")),  
    React.createElement(Popup, { trigger: popup, setTrigger: setPopup }, 
    React.createElement("h3", null, "My popup"),
    React.createElement("h6", null, "Lorem ipsum dolor sit, .... elit. Facere, rem.")
    
)));
}
//ReactDOM is a package that provides DOM specific methods
//ReactDOM. render() function takes two arguments, HTML code and an HTML element
ReactDOM.render(  
React.createElement(App, null),
document.getElementById('app'));


Hopefully, you have been able to create this react modal popup on button click using the above codes. You can download all the code by clicking the button below.

If you want to open this React popup window automatically, let me know in the comments. If you like this simple modal popup in react js then be sure to share this tutorial.








Tags
Foolish Developer

Foolish Developer

Hello, I am shantanu jana a web developer. In this blog, I share tutorials related to web design and development. Here you will find complete step-by-step tutorials and source code. facebook twitter youtube instagram external-link

You may like these posts

Show more