react-fcm-notification

react-fcm-notification

react-fcm-notification is a React library designed to simplify the implementation of notification features using Firebase Cloud Messaging (FCM). It provides token management and notification permission state management, all accessible as React components.

Features

• Firebase Cloud Messaging Support: Simplifies FCM token retrieval and deletion.
• Notification Permission Management: Offers hooks for managing browser notification permissions.
• Customizable: Allows custom logic integration during token retrieval and deletion.
• Simple API: Easy to use yet flexible design.

Installation

npm install react-fcm-notification

Usage

1. Firebase Initialization

Create a Firebase project and obtain the required settings. Then initialize the Messaging instance from Firebase.

// src/firebase.ts
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const firebaseApp = initializeApp(firebaseConfig);
const messaging = getMessaging(firebaseApp);

Alternatively, modularize the initialization as follows:

import { FirebaseApp, initializeApp } from "firebase/app";
import { getMessaging, Messaging } from "firebase/messaging";

let app: FirebaseApp;
let messaging: Messaging;

export const fcmEndpointUrl = `https://fcm.googleapis.com/v1/projects/__PROJECT_ID__/messages:send`

export const loadApp = (): FirebaseApp|null => {
  if ('serviceWorker' in navigator) {
    if (!app) {
      app = initializeApp({
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
        appId: "YOUR_APP_ID",
      })
    }
  }

  return app || null
}

export const loadMessaging = (): Messaging|null => {
  if ('serviceWorker' in navigator) {
    if (!messaging) {
      const app = loadApp()
      if (app) {
        messaging = getMessaging(app)
      }
    }
  }

  return messaging || null
}

interface UseFirebase {
  app: FirebaseApp | null
  messaging: Messaging | null
}

export const useFirebase = (): UseFirebase => {
  const app = useMemo(() => loadApp(), [])
  const messaging = useMemo(() => loadMessaging(), [])
  return { app, messaging }
}

2. Using the Component

Use the Notification component to implement the notification feature.

import React from "react";
import { Notification } from "react-fcm-notification";

const App: React.FC = () => {
  const { messaging } = useFirebase()

  if (!messaging) {
    return <p>Your browser does not support notifications.</p>;
  }

  return (
    <Notification
      messaging={messaging}
      vapidKey="YOUR_PUBLIC_VAPID_KEY"
      postRequest={(token) => /* api.registerDevice(token) */}
      postRemove={(token) => /* api.unregisterDevice(token) */}
    >
      {({ loading, isTokenActive, toggle }) => (
        <div>
          <p>Notifications are currently {loading ? "loading..." : (isTokenActive ? "enabled" : "disabled")}.</p>
          <button onClick={toggle}>
            {isTokenActive ? "Disable Notifications" : "Enable Notifications"}
          </button>
        </div>
      )}
    </Notification>
  );
};

export default App;

API

<Notification />

Property	Type	Required	Description
messaging	Messaging	Required	The Firebase Messaging instance.
vapidKey	string	Required	The VAPID key required to obtain an FCM token.
postRequest	(token: string) => any	Optional	Callback triggered when a token is retrieved.
postRemove	(token: string) => any	Optional	Callback triggered when a token is removed.
children	({ loading, isTokenActive, toggle }) => React.ReactNode	Required	A render function receiving the token state and a toggle function.

useFcm

A custom hook for managing FCM tokens.

const { loading, isTokenActive, requestToken, removeToken } = useFcm({
  messaging,
  vapidKey,
  postRequest,
  postRemove,
});

Return Value	Type	Description
loading	boolean	Indicates whether token request is currently in progress.
isTokenActive	boolean	Indicates if the token is active.
requestToken	() => any	Function to request a token.
removeToken	() => any	Function to remove a token.

useNotification

A custom hook for managing notification permissions.

const { loading, permission, requestPermission } = useNotification();

Return Value	Type	Description
loading	boolean	Indicates whether a notification permission request is currently in progress.
permission	NotificationPermission	Represents the current permission status for notifications (e.g., "granted", "denied", "default").
requestPermission	() => Promise<NotificationPermission>	Function to request notification permission from the user.

Author

@shinosaki

License

MIT License