How to Create a Popup with React

Adding certain elements to a website creates a considerable change. You can stand out from your competitors and grab the attention of your visitors easily if you follow the right steps.

In order to increase sales conversions and interact with your visitors, you can benefit from popups! Popups are great for reaching out to a particular audience about a significant issue. Popups are there for you if you have an announcement to make or a product to promote.

There are many different solutions to create popups. You can use different programming languages and codes while forming a popup window for your website. With a little patience and research, you can create them on your own with React.

In this blog post, we have explained what a React popup is and how to create a React popup window for your website.

Let's begin!

how to create a react popup

What is React Popup?

React is an open-source JavaScript library that is used to build user interfaces. It is a free-to-use tool created by Meta for UI components. It makes JS coding more functional with developer tools and template designing.

Also, React is a competent and easy-to-adopt library that you can use on your website. React is a powerful tool for creating popups and modals. It is easy to use and versatile, making it an excellent choice for many applications.

React popup has many benefits, including the ability to:

  • Create and customize popups easily.
  • Create React popup modals which are responsive.
  • Build popups that look great on different devices.

How to Create a React Popup?

react popup window creation

There are different ways to create a popup with React. We will show you how you can create customizable React popups. You can create your own popup for your website by looking at these solutions.

React allows users to build reusable components, so creating popup components becomes easier. For example, to create a modal with React JS, you can add the "modal" attribute to a popup component.

Creating a Simple Popup with Triggers and Customizing It

Creating React popups with reactjs-popup is practical when you are installing the necessary components. After installing reactjs-popup with npm and yarn, you can add the elements you need for your popup.

You can customize the previously created modal by adding different features. For example, you can add a code to your website that looks like this:

import React from 'react';import Popup from 'reactjs-popup';
export default () => ( <Popup trigger={<button className="button"> Open Modal </button>} modal nested > {close => ( <div className="modal"> <button className="close" onClick={close}> &times; </button> <div className="header"> Modal Title </div> <div className="content"> {' '} Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum. Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos? <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae? </div> <div className="actions"> <Popup trigger={<button className="button"> Trigger </button>} position="top center" nested > <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam doloribus. Odit, aut. </span> </Popup> <button className="button" onClick={() => { console.log('modal closed '); close(); }} > close modal </button> </div> </div> )} </Popup>); 

Along with this code, adding the code below allows you to adjust the details of your popup. For example, react popup elements such as width, font size, text-align, position, margin, background, and padding of your popup can be customized.

.modal { font-size: 12px;}.modal > .header { width: 100%; border-bottom: 1px solid gray; font-size: 18px; text-align: center; padding: 5px;}.modal > .content { width: 100%; padding: 10px 5px;}.modal > .actions { width: 100%; padding: 10px 5px; margin: auto; text-align: center;}.modal > .close { cursor: pointer; position: absolute; display: block; padding: 2px 5px; line-height: 20px; right: -10px; top: -10px; font-size: 24px; background: #ffffff; border-radius: 18px; border: 1px solid #cfcece;} 

After adding both of these codes to your website's code injection part, your react popup window can look like this:

custom react popup example

(Source)

Creating Prompt Popups with React

Prompt popups are useful if you want to gather information from your visitors as well. With prompt popups, you can ask your visitors their names, emails and so many things according to your needs.

You can create forms to collect data from your visitors. Also, collecting feedback from your visitors is a great way to optimize your website with prompt popups.

You can add a prompt popup with React by using a code that looks like this:

/** The prompt content component */
class Prompt extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: this.props.defaultValue
        };

        this.onChange = (e) => this._onChange(e);
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.value !== this.state.value) {
            this.props.onChange(this.state.value);
        }
    }

    _onChange(e) {
        let value = e.target.value;

        this.setState({value: value});
    }

    render() {
        return <input type="text" placeholder={this.props.placeholder} className="mm-popup__input" value={this.state.value} onChange={this.onChange} />;
    }
}

/** Prompt plugin */
Popup.registerPlugin('prompt', function (defaultValue, placeholder, callback) {
    let promptValue = null;
    let promptChange = function (value) {
        promptValue = value;
    };

    this.create({
        title: 'What\'s your name?',
        content: <Prompt onChange={promptChange} placeholder={placeholder} value={defaultValue} />,
        buttons: {
            left: ['cancel'],
            right: [{
                text: 'Save',
                key: '⌘+s',
                className: 'success',
                action: function () {
                    callback(promptValue);
                    Popup.close();
                }
            }]
        }
    });
});

/** Call the plugin */
Popup.plugins().prompt('', 'Type your name', function (value) {
    Popup.alert('You typed: ' + value);
});

When you add this code to your website's body part, it may look like this:

react prompt popup example

(Source

Use Popup Builder Popupsmart for Your Website

If you don't want to deal with coding with React JS, you can create popups with Popupsmart as well. Popupsmart is a no-code popup builder which is easy to use and free!

Popupsmart assists you while creating campaign-driven popups to your website. You can use different features of Popupsmart while creating your popup. There are many layouts you can choose from for your popup.

Also, you can set your target audience to reach out to your visitors properly.

Let's have a look at how you can create a popup with Popupsmart step by step.


First of all, you need to sign up if you haven't already. Then, go to the dashboard and click on the "Create a new popup" part to start building your popup.

create a new popup

Secondly, you need to select your business objective. We have six different business objectives which you can choose for different aims of your business.

select your business objective

With popups created with Popupsmart, you can:

  • Grow your email list and target your visitors.
  • Show an announcement of your products and services to your customers.
  • Comply with cookie laws and take your visitors' consent for storing cookies.
  • Increase phone calls and build stronger relationships with your visitors in an old-fashioned way.
  • Promote your products and services by presenting special offers to your audience.
  • Collect form submission to gather personal information and data of your visitors to enhance their user experience.

For this popup creation guide, we'll be using the "Promote your products" objective.

After you choose your objective, the popup builder screen will show up. In the "Layouts" section, you can select a layout that is suitable for your website. (We have so many options!)

popup layouts to promote

After choosing your favorite layout, click on the "Next to customize" part. It will redirect you to the "Customize" part, where you can play with your popup freely!

For example, you can edit a layout's image, headline, and description parts according to your business.

customize your popup

Make sure you add CTA phrases to your popup so that your audience can interact with your popup! Also, customizing your popup's layout according to your website's overall style and personality can be useful.

When you have finished customizing your popup and made sure that it looks remarkable, click on the "Next to teaser" part.

Apart from these, you can optimize the target of your popup. In the "Target" section, you can click on the "Visitor Behavior" to select how to target your visitors.

target your popup

There are different targeting options that you can choose according to your business objective. When you are done with this part, click on the "Next to publish" button.

publish-your-popup

In the "Publish" section, you can see that it is possible to integrate your popups with Google Analytics. Also, you can optimize the "Respondent email notifications" and the "On-click popup button creator" in this section.

You can see the Popupsmart code in the "Publish" part.

adding code of popup

When you finish creating your popup, add the embed code of your popup to your website's code injection part. You can add it before the closing </body> tag easily. Besides, you can add popups with Google Tag Manager to your website.

Click on the "Save & Publish" button when you are all set and ready to go!

Here is the final look of the popup we have created to promote a product:

final version of popup

Very easy, right? Now you can create your own popup to promote your products or services and increase sales conversions!

Popupsmart integrates with many marketing tools and websites such as Mailchimp, HubSpot, Shopify, Sendinblue, Squarespace; which makes the digital marketing process of companies even better.

Wrap Up

conclusion

Creating popup windows with React, which is an open-source JS library, is possible and easy to adapt. As we have explained, adding a popup to your website by using React can be simple if you are familiar with the Javascript coding language. You can install React JS to your website and form your modal popups.

It is possible to customize certain elements of a popup such as width, background, font size, and so on as well. Thanks to different customization options, you can form your own popup to achieve your business goals.

On the other hand, not everyone has to deal with writing codes and adding more codes to customize their popup. You can use our popup builder Popupsmart, which has a free-to-use plan.

We hope you liked reading about this topic and learned how you could create a popup easily with React and Popupsmart. Let us know which popup solution you decide to choose for your website. :-)

Check out these blog posts as well:

Show Comments