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:
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 w3wiki" , 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
Contact Us