Create simple Popup in ReactJS

Today we'll show you how to create simple popup in ReactJS without the help of the npm packages. You can use it to implement Confirmation box, email subscription notifications and display advertisements etc.

Create Simple Popup Example In React Application, Create modal popup in React JS. Simple react popup example, react popup window example, react confirmation popup, Implementing a Simple Modal Component in React, How do I create a popup window in react.js when the button and function are in separate file?

Checkout more articles on ReactJS

Basically, the idea is to provide the popup screen with the help of the pure HTML and CSS in ReactJS.

https://www.youtube.com/watch?v=XN-WY1rEjuM

1. Set up React application

Let's start with creating the simple react application with the help of the `create-react-app`. If you don't know about how to create a react application then refer the below link.

Create React Application

2. Create popup component

In the second step, we'll create a separate component for the popup and design it. You can modify it based on your theme.

Popup.js

import React from "react";

const Popup = props => {
  return (
    <div className="popup-box">
      <div className="box">
        <span className="close-icon" onClick={props.handleClose}>x</span>
        {props.content}
      </div>
    </div>
  );
};

export default Popup;

style.css

/* Popup style */
.popup-box {
  position: fixed;
  background: #00000050;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.box {
  position: relative;
  width: 70%;
  margin: 0 auto;
  height: auto;
  max-height: 70vh;
  margin-top: calc(100vh - 85vh - 20px);
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  border: 1px solid #999;
  overflow: auto;
}

.close-icon {
  content: 'x';
  cursor: pointer;
  position: fixed;
  right: calc(15% - 30px);
  top: calc(100vh - 85vh - 33px);
  background: #ededed;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  border: 1px solid #999;
  font-size: 20px;
}

3. Handle the Popup

Now, it's time to manage the popup component using the state variable. So for that you have to use state variable and create toggle method to manage the show/hide of the popup component. Also we need to pass the toggle method inside the popup component so we can manage the click event of the close button.

App.js

import React, { useState } from 'react';
import Popup from './Popup';

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

  const togglePopup = () => {
    setIsOpen(!isOpen);
  }

  return <div>
    <input
      type="button"
      value="Click to Open Popup"
      onClick={togglePopup}
    />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    {isOpen && <Popup
      content={<>
        <b>Design your Popup</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <button>Test button</button>
      </>}
      handleClose={togglePopup}
    />}
  </div>
}

export default App;

4. Output

Run the project and check the output.

Output - Create simple Popup in ReactJS - Clue Mediator

Thank you for reading!

Demo & Source Code

Github Repository StackBlitz Project