How to add push notification feature in React JS ?

Push notifications are used to inform users about updates, messages, or events within your web application. In ReactJS, push notifications can be integrated using service workers and the Notifications API.

Prerequisite:

• Introduction and installation of React JS
• React-hook useState

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

Steps to create React application and Module installation:

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

npx create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command:

cd project

Step 3: now install the dependency react-push-notification by using the following command:

npm i react-push-notification

Project Structure:

The updated dependencies in package.json file will look like:

"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;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:

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:

Reference: https://www.npmjs.com/package/react-push-notification