📦 Notifizz React Widget

The Notifizz React Widget allows you to easily embed the Notifizz notification bell and notification center inside your React application.

🚀 Installation

npm install @notifizz/react
# or
yarn add @notifizz/react

Usage

import React from "react";
import NotifizzBell from "@notifizz/react";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <NotifizzBell
        options={{
          apiKey: "YOUR_FRONT_API_KEY",
          token: "USER_FIREBASE_TOKEN_OR_BACKEND_TOKEN",
          authType: "firebase", // or "backendToken" or "none"
          position: "top-right",
          userEmail: "[email protected]",
          userId: "12345",
          notificationCenterStyles: { marginTop: "50px" },
          bellStyles: { marginRight: "20px" }
        }}
      />
    </div>
  );
}

Options

| Option | Type | Required | Description | | -------------------------- |----------------------------------------------------------------| ---------------------------------------- | ------------------------------------------------------------------- | | apiKey | string | ✅ | Your Notifizz front API key | | token | string | ✅ | Authentication token (Firebase ID token or backend-generated token) | | authType | "firebase" or "backendToken" or none | ✅ | Defines how the user is authenticated | | position | "top-right", "top-left", "bottom-right", "bottom-left" | ❌ | Placement of the bell widget | | notificationCenterStyles | { marginTop: string } | ❌ | Custom styles for the notification center | | bellStyles | { marginRight: string } | ❌ | Custom styles for the bell | | userEmail | string | ⚠️ Required if authType = backendToken | User email for backend authentication | | userId | string | ⚠️ Required if authType = backendToken | User ID for backend authentication |