How to create Popup box in ReactJS ?

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. In React.js, creating a popup box can be achieved using various approaches, including libraries or custom implementations. In this article, we are going to learn how we can create Popup in ReactJs. 

Reactjs-popup library: To create our Popup, we will use the reactjs-popup package because it is powerful, lightweight, and fully customizable. It is easy to use, supports typescript functionality, has IE support, and many more salient features.

Creating 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: It will look like this.

Example 1: In this example, we are going to add the popup on the homepage of our app using the package that we installed. For this, add the below content in the App.js file.

Filename: App.js

Javascript

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: In this example, we will use the reactjs-popup library to create a popup modal that appears at the click of a button and closes in the same behavior. Please update your file App.js like below. 

Filename: App.js

Javascript

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>
    )
};

Steps to run the application:

npm start

Output:

Reference: https://www.npmjs.com/package/reactjs-popup