@enbbox/react

React components and hooks for Enbbox — drop-in notification inbox for your React app.

Installation

npm install @enbbox/react @enbbox/js

Quick Start

Drop-in Inbox

The simplest way to add notifications — a self-contained bell + popover:

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

function App() {
  return <Inbox projectId="YOUR_PROJECT_ID" subscriberId="USER_ID" />;
}

Provider + Components

For more control, use the provider with individual components:

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

function App() {
  return (
    <EnbboxProvider projectId="YOUR_PROJECT_ID" subscriberId="USER_ID">
      <Bell />
      <Notifications />
      <Preferences />
    </EnbboxProvider>
  );
}

Hooks

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

function MyComponent() {
  const { notifications, isLoading } = useNotifications();
  const { unreadCount } = useCounts();
  const { preferences } = usePreferences();

  return <div>You have {unreadCount} unread notifications</div>;
}

Available Hooks

| Hook | Description | | -------------------- | ------------------------------- | | useEnbbox() | Access the Enbbox SDK instance | | useNotifications() | Fetch and manage notifications | | useCounts() | Get unread/unseen counts | | usePreferences() | Manage notification preferences |

Components

| Component | Description | | ------------------ | ---------------------------------------- | | <EnbboxProvider> | Context provider (wraps your app) | | <Inbox> | Self-contained bell + notification panel | | <Bell> | Notification bell with unread badge | | <Notifications> | Notification list | | <Preferences> | Preference toggles |

License

MIT