<Bell />

The Bell component displays the notification bell icon. It can also be used to show the number of unread notifications.

import { Inbox, Bell } from '@novu/react';

function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
    >
      <Bell />
    </Inbox>
  );
}

Custom Bell

You can pass any custom components as children to <Bell/> and render them as custom bell icon.

import { Inbox, Bell } from '@novu/react';
import { BellIcon } from './icons';

function Novu() {
  return (
    <Inbox>
      <Bell
        renderBell={(unreadCount) => (
          <div>
            <span>{unreadCount}</span>
            <BellIcon />
          </div>
        )}
      />
    </Inbox>
  );
}

Bring your own Popover

<Inbox /> can be mounted in your own popover component. For further customization, you can also use the renderBell and renderNotification render props. Below is an example of how to use <Inbox /> with Radix UI.

import React from 'react';
import * as Popover from '@radix-ui/react-popover';
import { BellIcon, Cross2Icon } from '@radix-ui/react-icons';
import { Inbox, Bell, Notifications } from '@novu/react';
import './styles.css';

const PopoverDemo = () => (
  <Inbox
    applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
    subscriberId="YOUR_SUBSCRIBER_ID"
  >
    <Popover.Root>
      <Popover.Trigger asChild>
        <Bell
          renderBell={(unreadCount) => (
            <div>
              <span>{unreadCount}</span>
              <BellIcon />
            </div>
          )}
        />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content className="PopoverContent" sideOffset={5}>
          <Notifications />
          <Popover.Close className="PopoverClose" aria-label="Close">
            <Cross2Icon />
          </Popover.Close>
          <Popover.Arrow className="PopoverArrow" />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  </Inbox>
);

export default PopoverDemo;