React Integration

Enbbox React Inbox component — drop-in notification center for React and Next.js apps. Installation, configuration, theming, and event handling.

Installation

npm install @enbbox/react

Basic Setup

import { Inbox } from "@enbbox/react";

function NotificationBell() {
  return (
    <Inbox
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId="user-123"
    />
  );
}

With Authentication

For production use, generate an HMAC hash to securely identify subscribers:

import { Inbox } from "@enbbox/react";

function SecureInbox() {
  return (
    <Inbox
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId={user.id}
      subscriberHash={user.hmacHash}
    />
  );
}

Generate the HMAC hash on your server:

import { createHmac } from "crypto";

const hash = createHmac("sha256", ENBBOX_API_KEY)
  .update(subscriberId)
  .digest("hex");

Custom Renderers

Custom Bell Icon

<Inbox
  projectId="YOUR_PROJECT_ID"
  subscriberId="user-123"
  renderBell={(unreadCount) => (
    <button>🔔 {unreadCount > 0 && <span>{unreadCount}</span>}</button>
  )}
/>

Custom Notification Renderer

<Inbox
  projectId="YOUR_PROJECT_ID"
  subscriberId="user-123"
  renderNotification={(notification) => (
    <div className="notification-item">
      <strong>{notification.subject}</strong>
      <p>{notification.body}</p>
      <time>{new Date(notification.createdAt).toLocaleString()}</time>
    </div>
  )}
/>

Next.js Integration

For Next.js applications, wrap the Inbox in a client component:

"use client";

import { Inbox } from "@enbbox/react";

export function NotificationInbox() {
  return (
    <Inbox
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId={userId}
    />
  );
}

Using Individual Components

Instead of the all-in-one <Inbox />, you can compose your own layout:

import {
  EnbboxProvider,
  Bell,
  Notifications,
  Preferences,
} from "@enbbox/react";

function CustomInbox() {
  return (
    <EnbboxProvider
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId="user-123"
    >
      <Bell />
      <Notifications />
      <Preferences />
    </EnbboxProvider>
  );
}

Using Hooks

import { EnbboxProvider, useNotifications, useCounts } from "@enbbox/react";

function NotificationPanel() {
  const { notifications, isLoading, hasMore, fetchMore } = useNotifications();
  const { counts } = useCounts({ filters: [{ read: false }] });

  const unread = counts?.[0]?.count ?? 0;

  return (
    <div>
      <h3>Notifications ({unread} unread)</h3>
      {isLoading && <p>Loading...</p>}
      {notifications?.map((n) => (
        <div key={n.id}>
          <strong>{n.subject}</strong>
          <p>{n.body}</p>
        </div>
      ))}
      {hasMore && <button onClick={fetchMore}>Load more</button>}
    </div>
  );
}

On this page