@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 NotifizzInbox from "@notifizz/react";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <NotifizzInbox
        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.

No-auth mode

For development or trusted environments where user identity is provided directly (no token verification):

<NotifizzInbox
  options={{
    apiKey: "YOUR_FRONT_API_KEY",
    authType: "none",
    userEmail: "[email protected]",
    userId: "USER_ID",
  }}
/>

With authType: "none", no token is needed — the user is identified by userEmail and userId alone.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | options | NotifizzInboxOptions | Yes | Configuration (see Options below). | | mountId | string | No | ID of the div where the notification center is mounted (default: "notifizz-notifications"). | | onReady | () => void | No | Called when the widget is ready. | | onStateChange | (state: NotifizzState) => void | No | Called when notification state changes. | | renderBell | (ctx: NotifizzBellContext) => ReactNode | No | Render prop to customize the bell (receives unreadCount, toggle, open, close, etc.). | | serverUrl | string | No | Override widget server URL. | | apiUrl | string | No | Override API base URL. | | widgetPath | string | No | Override widget script path. |

Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | apiKey | string | Yes | Your Notifizz front API key. | | token | string | If authType !== 'none' | Auth token (Firebase ID token or backend token). Not needed for 'none'. | | 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' or 'none' | User email. | | userId | string | If authType === 'backendToken' or 'none' | User ID. |

Vite / Lovable troubleshooting

If you see "Cannot read properties of null (reading 'useState')" or similar hooks errors, your bundler is loading two separate copies of React. This is common with Vite-based tools like Lovable.

Option A — Use the Notifizz Vite plugin (recommended)

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { notifizzReact } from '@notifizz/react/vite-plugin';

export default defineConfig({
  plugins: [react(), notifizzReact()],
});

Option B — Manual resolve.dedupe

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
});

Both options force Vite to resolve react and react-dom to a single shared instance, which fixes the hooks crash.

Custom bell

Use the renderBell render prop to fully control the bell UI. It receives a context with unreadCount, isOpen, isReady, toggle, open, and close:

import NotifizzInbox from "@notifizz/react";

<NotifizzInbox
  options={{
    apiKey: "YOUR_FRONT_API_KEY",
    token: "USER_TOKEN",
    authType: "firebase",
    position: "top-right",
  }}
  renderBell={({ unreadCount, toggle }) => (
    <button onClick={toggle} aria-label="Notifications">
      Notifications {unreadCount > 0 && `(${unreadCount})`}
    </button>
  )}
/>

Exports

• Default: NotifizzInbox
• Named: NotifizzInbox, NotifizzProvider, useNotifizz
• Types: NotifizzInboxProps, NotifizzInboxOptions, NotifizzBellContext, NotifizzState

Use useNotifizz() inside a tree wrapped with NotifizzProvider to access the same bell context (e.g. unreadCount, toggle) without prop drilling.