Pop-ups are a great way to catch your user's attention and display important information. You can use them for things like confirmation messages and error messages. Or you can just use them to show extra information about an element on a page.

In React, there are two ways to create pop-ups: using React hooks or using an external module.

How to Create Pop-Ups in React.js

First, create a simple react app. After that, you can add a pop-up using either of two methods. You can use React hooks or an external module.

1. Using React Hooks

The hooks approach is simpler and only requires a few lines of code.

First, you need to create a function that will open the pop-up. You can define this function in the component that will display the pop-up.

Next, you need to use the useState hook to create a state variable for the pop-up. You can use this state variable to determine whether the pop-up should be open or not.

Finally, you need to add a button to your component that will trigger the pop-up. When you click this button, set the state variable to true, which will cause the pop-up to appear.

Take a look at the code for this approach:

        import React, { useState } from 'react';
 
function Example() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Pop-up
      </button>
 
      {isOpen && (
       <div>
        <div>
          This is the content of the pop-up.
        </div>
        <button onClick={() => setIsOpen(false)}>
          Close Pop-up
        </button>
       </div>
      )}
    </div>
  );
}
 
export default Example;

First, this code imports the useState hook from the core react library. Then, the Example function uses the useState hook to create a state variable called isOpen. This state variable determines whether the pop-up should be open or not.

Next, add a button to the component that will trigger the pop-up. When you click this button, the state variable will be set to true, which will cause the pop-up to appear.

Finally, add a button to the component that will close the pop-up. When you click this button, the state variable will be set to false, which will cause the pop-up to disappear.

react page with one button and opened popup

2. Using an External Module

You can also create pop-ups in React using an external module. There are many modules available that you can use for this purpose.

One popular module is react-modal. react-modal is a simple and lightweight module that allows you to create modal dialogs in React.

To use react-modal, you first need to install it using npm:

        npm install react-modal
    

Once you’ve installed react-modal, you can import it into your React component:

        import ReactModal from 'react-modal';
import React, { useState } from 'react';
 
function Example() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={setIsOpen}>Open Modal</button>
      <ReactModal
        isOpen={isOpen}
        contentLabel="Example Modal"
      >
        This is the content of the modal.
      </ReactModal>
    </div>
  );
}
 
export default Example;

In this code, you are still using the React hooks but with the react-modal module. With the react-modal module, you can add more functionality to the pop-up. As you can see, the code is very similar to the previous approach. The only difference is that you are now using the ReactModal component from react-modal instead of creating your own.

First, you have to import the react-modal module. Then, you use the ReactModal component to wrap the content of your pop-up. Use the isOpen prop to determine whether the modal should be open or not.

react page with a popup

Once you have created your pop-up, you may want to add additional features to it. For example, you may want to close the pop-up when the user clicks outside of it.

To do this, you need to use the onRequestClose prop of the react-modal component. This prop takes a function as its value. This function will run when the user clicks outside of the modal.

For example, to close the pop-up when the user clicks outside of it, you would use the following code:

        import React, { useState } from 'react';
import ReactModal from 'react-modal';
 
function Example() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Modal
      </button>
      <ReactModal
        isOpen={isOpen}
        contentLabel="Example Modal"
        onRequestClose={() => setIsOpen(false)}
      >
        This is the content of the modal.
      </ReactModal>
    </div>
  );
}
 
export default Example;

The function that we are passing to the onRequestClose prop simply sets the isOpen state variable to false. This will cause the modal to close.

You can also add other props to the ReactModal component to customize it further. For a full list of props, you can check out the react-modal documentation.

Adding Styling in Pop-Ups

Once you have created your pop-up, you may want to add some styling to it. There are many ways to style React components, but we will focus on inline styles.

Inline styles are styles that you can add directly to a React component. To add inline styles, you need to use the style property. This property takes an object as its value, where the keys are the style properties and the values are the style values.

For example, to add a background color of white and a width of 500px to a pop-up, you would use the following code:

        import React from 'react';
 
function Example() {
  return (
    <div style={{ backgroundColor: 'white', width: '500px' }}>
      This is the content of the pop-up.
    </div>
  );
}
 
export default Example;

In this code, you add the style property to the div element with the backgroundColor and width properties. You can also use Tailwind CSS in react app to style your popups.

Increase Conversion Rate With Pop-Ups

Pop-ups can help increase conversion rates by displaying important information to the user. For example, you can use a pop-up to display a discount code or a special offer. You can also use a pop-up to collect email addresses for your newsletter. Adding a pop-up to your React app is a great way to increase conversion rates.

You can also easily deploy your React application for free on GitHub pages.