How to create Popup box in React JS ?

Last Updated : 04 Dec, 2023

Popup boxes, also known as modal or dialog boxes, are common UI elements used to display additional content or interactions on top of the main page. Creating a popup box in React can be achieved using various approaches, including libraries or custom implementations. We will use the Reactjs-popup library to Create Popup Box in React JS.

Prerequisites:

Approach:

To Create Popup Box in React we will install the reactjs-popup library first. Then import the popup component of the library and enclose the popup content inside with the Popup Components along with the required props.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm i reactjs-popup

Project Structure:

The updated dependencies in package.json file will lookl like.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "reactjs-popup": "^2.0.6",
        "web-vitals": "^2.1.4"
},

Example 1: This example adds the popup on the homepage of our app using the reactjs-popup library.

Javascript

// Filename - App.js
 
import React from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
 
export default function PopupGfg() {
    return (
        <div>
            <h4>Popup - GeeksforGeeks</h4>
            <Popup trigger=
                {<button> Click to open popup </button>}
                position="right center">
                <div>GeeksforGeeks</div>
                <button>Click here</button>
            </Popup>
        </div>
    )
};

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output:

Example 2: This example uses the reactjs-popup library to create a popup modal that appears at the click of a button and closes in the same behavior.

Javascript

// Filename: App.js
 
import React from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
 
export default function PopupGfg() {
    return (
        <div>
            <h4>Popup - GeeksforGeeks</h4>
            <Popup trigger=
                {<button> Click to open modal </button>} 
                modal nested>
                {
                    close => (
                        <div className='modal'>
                            <div className='content'>
                                Welcome to GFG!!!
                            </div>
                            <div>
                                <button onClick=
                                    {() => close()}>
                                        Close modal
                                </button>
                            </div>
                        </div>
                    )
                }
            </Popup>
        </div>
    )
};