How to create overlay popup in react js?

November 29, 2024

Hi Friends 👋,

Welcome To aHoisting!

To create overlay popup in react js, you can set background: rgba(0, 0, 0, 0.5); in .overlay. It will create overlay popup in react js.

Today, I am going to show you, how to create overlay popup in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useState } from "react";
import "./App.css";

Step 3: Create a Component.

You can use <OverlayPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}> to create overlay popup in react js.

<div className="App">
  <button onClick={() => setIsPopupOpen(true)}>Open Popup</button>
    <OverlayPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}>
        <h2>aHoisting</h2>
        <p>Welcome To aHoisting!</p>
  </OverlayPopup>
</div>

Create overlay popup example.

The below code is an example of a React. You have to import "./App.css" and set background: rgba(0, 0, 0, 0.5); in .overlay to create overlay popup in react js.

App.js

import React, { useState } from "react";
import "./App.css";

const OverlayPopup = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="overlay">
      <div className="popup">
        <button className="close-button" onClick={onClose}>
          &times;
        </button>
        {children}
      </div>
    </div>
  );
};

export default function App() {
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setIsPopupOpen(true)}>Open Popup</button>
      <OverlayPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}>
        <h2>aHoisting</h2>
        <p>Welcome To aHoisting!</p>
      </OverlayPopup>
    </div>
  );
}

App.css

/* Overlay background */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup content */
.popup {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  width: 300px;
  text-align: center;
  position: relative;
}

/* Close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.close-button:hover {
  color: red;
}

/* Open button styling (optional) */
.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.App button:hover {
  background-color: #0056b3;
}

In the above code example, I have used the background: rgba(0, 0, 0, 0.5); to create overlay popup in react js.

Check the output of the above code.

All the best 👍