How to create Popup box in ReactJS ?

In this article, we are going to learn how we can create Popup in ReactJs. A pop-up is a graphical user interface display area, usually a small window, that suddenly appears in the foreground of the visual interface.

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

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