how-to-send-push-notifications-with-firebase-and-react
starter-demo
how-to-send-push-notifications-with-firebase-and-react | starter-demo | |
---|---|---|
1 | 1 | |
1 | 0 | |
- | - | |
0.0 | 0.0 | |
almost 2 years ago | almost 2 years ago | |
HTML | HTML | |
- | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
how-to-send-push-notifications-with-firebase-and-react
-
How to send push notifications with Firebase and React
import React, { useEffect } from 'react' import Box from '@mui/material/Box' import Button from '@mui/material/Button' import LinearProgress from '@mui/material/LinearProgress' import useFirebaseMessaging from '@useweb/use-firebase-messaging' import CopyToClipboard from '../../lib/components/CopyToClipboard/CopyToClipboard' import Text from '../../lib/components/Text/Text' import Header from '../../lib/components/_unique/Header/Header' import useSnackbar from '../../lib/components/Snackbar/Snackbar' export default function HomePage() { const snackbar = useSnackbar() const firebaseMessaging = useFirebaseMessaging({ onMessage: (message) => { console.log(`Received foreground message`, message) snackbar.show({ message: message?.notification?.title || message?.data?.title, }) }, }) useEffect(() => { firebaseMessaging.init() }, []) return ( {firebaseMessaging.initializing && ( <> )} {firebaseMessaging.error && ( )} {firebaseMessaging.fcmRegistrationToken && ( <> Copy )} ) }
starter-demo
-
How to send push notifications with Firebase and React
npx degit https://github.com/jeremytenjo/starter-demo.git firebase-messaging-with-react && cd firebase-messaging-with-react && npm i && npm run dev
What are some alternatives?
learn-to-send-email-via-google-script-html-no-server - :email: An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect for static websites that need to collect data.
reactjs-master-class - The repository helps you learn React by building Netflix.
react-learning-course-short - This repo dedicated to the course "React for Beginners". The course was created to support Ukraine πΊπ¦ and Ukrainians in the war against russia. It's completely free and open-sourced.
dad-jokes - Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE
env-variables-react - How to Use Environment Variables in React
gapi-firebase - An example of how to use GAPI and Firebase Auth together to authenticate users and talk to Google APIs.
push-notifications-local - Notifications Playground