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
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.
Contact Us