How to Add Push Notifications into a ReactJS App
Tags: react, webdev, javascript, frontend
Published: 2021-06-28 16:48:32

---
title: How to Add Push Notifications into a ReactJS App
published: true
date: 2021-06-25 22:53:02 UTC
tags: react, webdev, javascript, frontend
canonical_url: https://onesignal.com/blog/how-to-integrate-push-notifications-in-react/
---

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://onesignal.com/blog/content/images/2021/06/add-push-notifications-reactjs--1-.png)

Push notifications are a useful tool to engage and retain users. In this tutorial, we'll show you how to integrate with OneSignal for free in order to leverage push notifications in your ReactJS app.

## **OneSignal & Your Browser's Push API**

The browser's push API gives web applications the ability to receive messages from a server whether or not the web app is in the foreground or currently loaded on a user agent. This lets you deliver asynchronous notifications and updates to users who opt-in, resulting in better engagement with timely new content.

This tutorial will cover how to integrate OneSignal push notifications into your app using our typical setup process. Part one of this guide covers the OneSignal setup process. Part two of this guide covers how to integrate with ReactJS using a basic setup method. Part three covers  an advanced setup method you can implement after completing the basic setup. The advanced setup will unlock even more message customization and automation opportunities for your website or app.

## **Guide Overview**

- **[Part 1: Set Up Your OneSignal Account](#part-1-set-up-your-onesignal-account)**
- [Web Configuration](#web-configuration)
- **[Part 2: Quick Push Notification Setup In ReactJS](#part-2-quick-push-notification-setup-in-reactjs)**
- [Allow Web Push Notifications](#allow-web-push-notifications)
- [Send Web Push Notifications](#send-web-push-notifications)
- **[Part 3: Advanced Push Notification Setup In ReactJS](#part-3-advanced-push-notification-setup-in-reactjs)**

This tutorial requires some basic knowledge of React. I'm using the [Create React App](https://create-react-app.dev/) to generate my project and **NodeJS version 14.16**.

**Additional ReactJS Setup Resources:**

- [Quick React Setup](https://github.com/OneSignal/OneSignal-React-Sample/tree/quick-setup)
- [Advanced React Setup](https://github.com/OneSignal/OneSignal-React-Sample)

### Creating Your React App

Inside of your terminal run the following commands to create a new React project using Create React App:

<!--kg-card-begin: code-->
```shell
npx create-react-app react-onesignal
cd react-onesignal
npm start
```
<!--kg-card-end: code-->

For the official Create React App documentation, click [**here**](https://create-react-app.dev/docs/getting-started) **.**

## **Part 1: Set Up Your OneSignal Account**

To begin, [login](https://app.onesignal.com/login) to your OneSignal account or[create a free account](https://app.onesignal.com/signup). Then, click on the blue button entitled **New App/Website** to configure your OneSignal account to fit your app or website.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh4.googleusercontent.com/_xsX1A89giwIJxWwxEBU-VPyN__2WkBFFfGnBpytO0YanJlO9_YESNOZwNBPDRiFJ6MW10mirC9g6HVT5y7qu7CGt-a9GJA6grQTRgWg26fEyfuoeNRVlQXT3KbtUnfdEK_lZEPs)

<!--kg-card-end: image-->

Insert the name of your app or website. Select _ **Web Push** _ as your platform.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh5.googleusercontent.com/PcoPAGDM3jPwfHVF7gfy9kTw-XsVu-msnPHhyQ2f_mELEfgk_crUE6a6b8hGFhoPl2WtJTLhttO0T-NZ29tIVssZGQ3P-3sM2yNYX1Bzat_9rsaw6n1TBcdSCYEvBk6XulOZCA_W)

<!--kg-card-end: image-->

Click on the blue button entitled, **Next: Configure Your Platform**.

### **Web Configuration**

Under **Choose Integration**, select the **Typical Site** option.

In the **Site Setup** section, enter your chosen web configuration. In my case, the configuration looks like this:

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh5.googleusercontent.com/7O0nu3E9zJoJKA1j4GI_pW1UTAo46gdLyMkFqFnF2GrmfOknSdjrKTwpEMAeDY8z94BX8WW-4sEpg0SvPayW90V6u7QxyZhiljnkp-Ig3sUVGcVucFjl-YoSPlEG_uG9ZnXQleII)

<!--kg-card-end: image-->

Notice for testing purposes I’m entering my localhost URL (http://localhost:3000). If you are doing the same, make sure you click on the **LOCAL TESTING** option. This will ensure to treat HTTP localhost as HTTPS for testing.

Under **Permission Prompt Setup**, you will see three vertical blue dots under the **Actions** header on the far right side of the screen. Click on the blue dots and select **Edit** from the drop-down menu.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh5.googleusercontent.com/3ckPpKnMrgIewhbBGejxAPyme-MmFYu66eNKNYV9071rhoLtUZW0wuMfpkAAEYDKM4qvza3xV6CvABuTr0EqdIgcSMz_dp_j5NjchG_SnGjRTuFguj5irs5klZMNFyKF0gQhcshc)

<!--kg-card-end: image-->

A window will open with the configuration of our[push notification Slide Prompt](https://documentation.onesignal.com/docs/slide-prompt). Confirm that **Auto-prompt** is enabled (toggled to the right).

Under **Show When**, you can change the second increment to alter how long your slide prompt will delay after a user visits your page. You can leave it as it is, or you can reduce the seconds so that your prompt appears sooner. Once you've input your chosen delay increment, click the grey **Done** button located at the bottom right corner of the window.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh5.googleusercontent.com/RMwLSydK37IlHj4LViONqNZF-h1vzmNAfhOJTC8nLWGJT-QkPg9CRohpr1b0IT8VZRgx3SrRhB0J6a_1ap_-WZROdmC37OpRLlkOf3g36yIRdUR_z9yjL1uq1zJUq2B9tAweB0WT)

<!--kg-card-end: image-->

After clicking **Done**, scroll down to the bottom of the page and click **Save** to save your auto-prompt selections.

You will be redirected to a different page with an important step: Downloading the SDK files. Click **DOWNLOAD ONESIGNAL SDK FILES** and save them on your computer to retrieve later.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh3.googleusercontent.com/oxCAojMFoAACKunPahui61NcOCgS4LTmPzPI_P8kJ-cc1KJDMkSLWmWa7MRe58P0DswB-wVsb9Gj1R36QtosHP5IBfZP2iq8T7dGTQRWz5Gksyv0fstyqqD7qUhtmZn_YxPc0Saj)

<!--kg-card-end: image-->

Under the section entitled **Add Code to Site**, you will see a grey button that allows you to copy the code snippet. Click the grey **COPY CODE** button.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh3.googleusercontent.com/H_P0exDj__SeXH6alcBsvqnx9kHPDCkdV6mfn5y0nWziAhOmMoz5HcfKT-tthUWLg5nx55-W6w53E1cegCIeMP6fhbz7Sk9DhdzNqsxI95mS73tCmIIv0GEfL5cV_lX0f0ydw4NU)

<!--kg-card-end: image-->
## **Part 2: Quick Push Notification Setup In ReactJS**

In your ReactJS project folder, navigate to the **public** folder and open the **index.html** file. Inside of the head HTML tag, paste the code you previously copied from the OneSignal page.

Now, locate the SDK files you downloaded on your computer and insert them inside of the **src** folder of your ReactJS app.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh6.googleusercontent.com/XaJxaRPxdETYxZ8bdyRHbT3I-sKYaDmFisuSoIs45uLIyaVQNUhHp4AOlmysaZhyEJtVZK1e1sXKMhwRLcB5Gv7bcYR4fXp5OQLldr-rbbSsK8q6fgE8ulXjkObT8_ORyPi3i6p7)

<!--kg-card-end: image-->
### **Allow Web Push Notifications**

Run the ReactJS app and visit your website. You should see the following prompt appear after your chosen time delay interval:

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh4.googleusercontent.com/_7vWg932q73Be-1N0G1vQaOCAhi-dTzq9UqnF8rhIRb5XQ4cAWv6ih2znK1fsDCvFTg4P3LEw2D_22wTAEeHbd2Be4o-aXLDiRbEPIixDiVmVea7-_3YsZc5R5Gnggy58SCY6m0N)

<!--kg-card-end: image-->

Click on the blue **Allow** button to enable push notifications on your browser.

### **Send Web Push Notifications**

It’s time to send your first web push notification! To do so, login to your OneSignal account and navigate to the **Dashboard** tab. On the dashboard page, click on the blue button that says **New Push**.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh3.googleusercontent.com/vuELGjx1hj73PfTIvUOrV7t_jVD67AfPJ5FsllC-jUbSDQ6OTBm6aX9cAaIpdItD6dCktA7fh_4Y9omdt4Z8L_4-LZmlFOpegex1TlanbFDawo588lJfV38rnJljz_8yDbUZILfr)

<!--kg-card-end: image-->

You will be redirected to a new window that will allow you to customize your push notification. Under **Audience**, make sure that **Send to Subscribed Users** is selected. Then, create your message by adding your message title, content, and an image. Because this is the first notification your subscribers will receive, you may choose to craft a simple welcome message to confirm that they've been subscribed and reinforce the value that notifications will provide.

Under the **Delivery Schedule** section, select **Immediately** and **Send to everyone at the same time** to send to all your current web push subscribers. If you have just finished setting up your OneSignal account, chances are you're the first and only subscriber. If your app or website is heavily trafficked and other users have already opted in to receive push notifications, you may want to select **Send to a particular segment(s)** to test your message out on a specific audience. When you're ready to send your message, click on the blue **Review and Send** button at the bottom of the screen.

<!--kg-card-begin: image-->

![Developer Guide: How to Add Push Notifications into a ReactJS App](https://lh4.googleusercontent.com/WfSJmUgCixDvTIUpqBrAAiZX-kkqV05KPXR2F78lOA5vMTS1QH1f2bAyQoezybGBwIG_RBv0wScdMe7mMYpeTFEhIbPi2hemHAlHvlazyLOPANSAjdg0T9sjOVXd0dKHIN5mD--k)

<!--kg-card-end: image-->

A small popup will appear for you to review your message. Once you are satisfied, click on the blue **Send Message** button. You should receive a web push notification on your device! 🚀

## **Part 3: Advanced Push Notification Setup In ReactJS**

If you want the ability to use OneSignal across your entire ReactJS app, complete these advanced push notification setup steps after completing the quick push notification setup.

Inside of your **index.html** file, remove the following code:

<!--kg-card-begin: code-->
```html
<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
  OneSignal.init({
    appId: "YOUR-APP-ID",
  });
});
</script>
```
<!--kg-card-end: code-->

Make sure you keep the CDN link.

Inside of your **App.js** file, you will enter the following lines of code:

<!--kg-card-begin: code-->
```javascript
window.OneSignal = window.OneSignal || [];
const OneSignal = window.OneSignal;
```
<!--kg-card-end: code-->

The code above will make the `window` object aware of the `OneSignal` property. This will allow you to have access to the OneSignal SDK properties after the SDK has loaded into your web application.

In the same file we will create a `useEffect`. This hook will have the initialization code needed to trigger OneSignal. Remember to add the dependency array `[]`  to your `useEffect` hook. The `init()` method from OneSignal can only be called once and the dependency array will help us to avoid that the useEffect gets triggered multiple times firing the `init()` method.

<!--kg-card-begin: code-->
```javascript
useEffect(() => {
 OneSignal.push(() => {
   OneSignal.init({
     appId: "YOUR-APP-ID"
   })
 });
},[]);
```
<!--kg-card-end: code-->

Now, you can keep expanding your code to make use of different features of the OneSignal SDK across your ReactJS app by passing the `OneSignal` variable to different components. You can also use the [custom code setup](https://documentation.onesignal.com/docs/web-push-custom-code-setup) to modify the configurations of your prompt inside of your ReactJS application without using the OneSignal dashboard. To learn more about our Web Push SDK, visit our web push[SDK documentation](https://documentation.onesignal.com/docs/web-push-sdk).