How To Add Push Notification Feature In ReactJS?

Last Updated : 14 Oct, 2024

Adding a push notification feature to your React application can significantly improve user engagement by delivering timely updates, alerts, or messages even when users are not actively using your app. Push notifications are commonly used for sending updates about new content, promotional offers, or status changes.

In this article, we will learn how to add a push-on notification feature in React application using an npm package React-push-notification.

Basic Flow of Push Notifications

Before diving into implementation, it’s important to understand how push notifications work:

Service Worker: The backbone of push notifications in web applications. It runs in the background to handle notifications even when the app is not open.
Push Subscription: Users need to subscribe to push notifications, which generates a PushSubscription object.
Push API: Allows you to send push messages to users' browsers.
Notification API: Displays the notification to the user once a push message is received.

Steps To Add Push Notification Feature

Step 1: Create a React application using the following command:

npx create-react-app project
cd project

Step 2: Install the required dependencies.

npm i react-push-notification

Project Structure

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Approach 1: We are creating a simple button named push notification which triggers the onclick function buttonOnClick that calls the method addNotification here I have added the title as 'Warning' and native as true.

Example : Write the following code in App.js file

JavaScript

// App.js

import addNotification from 'react-push-notification';
import { Notifications } from 'react-push-notification';

function App() {
    function buttonOnClick() {
        addNotification({
            title: 'Warning',
            native: true
        })
    };
    return (
        <div className="App">
            <Notifications />
            <h1>Hey Geek!</h1>
            <button onClick={buttonOnClick}>
                Push Notification
            </button>
        </div>
    );
}

export default App;

To start the application run the following command.

npm start

Output

Add Push Notification Feature In ReactJS

Approach 2 : We can further create our own notifications with different colors and styles.

Example: Write the following code in App.js file

JavaScript

// App.js

import React, { useState } from "react";
import { Notifications } from "react-push-notification";
import addNotification from "react-push-notification";

function App() {
    const [name, setName] = useState("");

    function warningNotification() {
        addNotification({
            title: "Warning",
            subtitle: "Please fill it",
            message: "You have to enter name",
            theme: "red",
            closeButton: "X",
        });
    }

    function successNotification() {
        addNotification({
            title: "Success",
            subtitle: "You have successfully submitted",
            message: "Welcome to GeeksforGeeks",
            theme: "light",
            closeButton: "X",
            backgroundTop: "green",
            backgroundBottom: "yellowgreen",
        });
    }

    function handleSubmit(e) {
        e.preventDefault();
        if (name === "") warningNotification();
        else successNotification();
    }

    return (
        <div className="App">
            <Notifications />
            <h1>Hey Geek!</h1>
            <form>
                <label>Name:</label>
                <input
                    name="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <button onClick={handleSubmit} type="submit">
                    Submit
                </button>
            </form>
        </div>
    );
}

export default App;

Output:

ReactJS UI Ant Design Notification Component

aniluom

Improve

Article Tags :