Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Popup box in ReactJS ?

  • Last Updated : 08 Nov, 2021

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.

Approach: To create our Popup we are going to use the reactjs-popup package because it is powerful, lightweight, and fully customizable. After that, we will add our popup on our homepage with a button to trigger the popup using the installed package.

Create ReactJs Application: You can create a new ReactJs project using the below command:

npx create-react-app gfg

Install the required package: Now we will install the reactjs-popup package using the below command:

npm i reactjs-popup

Project Structure: It will look like this.

Adding Popup: 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.

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


Explanation: In the above example first, we are importing the Popup component from the react-popup package. After that, we are using our Popup component to add a popup with a button to trigger the popup.

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

npm start

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!