@notifizz/react

React component to embed the Notifizz notification bell and notification center in your React app.

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",
          position: "top-right",
          userEmail: "[email protected]",
          userId: "12345",
          notificationCenterStyles: { marginTop: "50px" },
          bellStyles: { marginRight: "20px" },
        }}
      />
    </div>
  );
}

Use authType: "backendToken" when using a backend-generated token; then provide userEmail and userId.

Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | apiKey | string | Yes | Your Notifizz front API key. | | token | string | Yes | Auth token (Firebase ID token or backend token). | | authType | 'firebase' | 'backendToken' | 'none' | Yes | How the user is authenticated. | | position | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | No | Bell position. | | notificationCenterStyles | { marginTop?: string } | No | Styles for the notification center. | | bellStyles | { marginRight?: string; marginLeft?: string } | No | Styles for the bell. | | userEmail | string | If authType === 'backendToken' | User email. | | userId | string | If authType === 'backendToken' | User ID. |

Custom icon

Pass a custom bell icon via the icon prop (e.g. a React element or SVG):

<NotifizzBell
  options={{
    apiKey: "YOUR_FRONT_API_KEY",
    token: "USER_TOKEN",
    authType: "firebase",
    position: "top-right",
  }}
  icon={
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
    </svg>
  }
/>