@novu/react

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

function NovuInbox() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber={{
        subscriberId: "SUBSCRIBER_ID",
      }}
      apiUrl="https://api.novu.co"
      socketUrl="https://socket.novu.co"
      placement="right"
      placementOffset={10}
      onNotificationClick={(notification) => {
        // Handle notification click
        console.log(notification);
      }}
    />
  );
}

import { Bell } from "@novu/react";
import { BellIcon } from "lucide-react";

function NotificationBell() {
  return (
    <Bell
      renderBell={(unreadCount) => (
        <div className="relative">
          <BellIcon className="h-6 w-6" />
          {unreadCount > 0 && (
            <span className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center">
              {unreadCount}
            </span>
          )}
        </div>
      )}
    />
  );
}

import { Notifications } from "@novu/react";

function NotificationList() {
  return (
    <Notifications
      onNotificationClick={(notification) => {
        // Handle notification click
        console.log(notification);
      }}
      renderNotification={({ body, createdAt }) => (
        <div className="flex gap-2 p-2">
          <div className="flex-1">
            <p>{body}</p>
            <time className="text-sm text-gray-500">
              {new Date(createdAt).toLocaleDateString()}
            </time>
          </div>
        </div>
      )}
    />
  );
}

import { Inbox, NotificationItem } from "@novu/react";

function NovuInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => (
        <NotificationItem notification={notification}>
          <NotificationItem.Avatar />
          <NotificationItem.Content>
            <NotificationItem.Subject />
            <NotificationItem.Body />
            <NotificationItem.Date />
          </NotificationItem.Content>
          <NotificationItem.DefaultActions />
        </NotificationItem>
      )}
    />
  );
}

import { InboxContent } from "@novu/react";

function CustomInbox() {
  return (
    <div className="custom-inbox-wrapper">
      <InboxContent
        onNotificationClick={(notification) => {
          // Handle notification click
          console.log(notification);
        }}
        onPrimaryActionClick={(notification) => {
          // Handle primary action click
          console.log(notification);
        }}
        hideNav={false}
        renderNotification={({ body, createdAt }) => (
          <div className="notification-item">
            <p>{body}</p>
            <time>{new Date(createdAt).toLocaleDateString()}</time>
          </div>
        )}
      />
    </div>
  );
}

import { NovuProvider, Subscription } from "@novu/react";

function SubscriptionManager() {
  return (
    <NovuProvider
      subscriber="SUBSCRIBER_ID"
      applicationIdentifier="APPLICATION_IDENTIFIER"
    >
      <Subscription
      topic="product-updates"
      identifier="user-preference-1"
      preferences={["workflow-one", "workflow-two"]}
      appearance={{
        baseTheme: isDark ? subscriptionDarkTheme : undefined,
      }}
    />
    </NovuProvider>
  );
}