Inbox Components

Learn how to use the different components of the Inbox

Components

The Inbox is composed of the following components:

• Inbox
• Bell
• Notifications
• Preferences

Inbox

It renders an opinionated <Inbox /> with a bell button, that triggers a popover on lock. The popover contains the notifications list and the user preferences.

Default Inbox

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

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

Controlled Popover state

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

function Novu() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Inbox
        applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
        subscriberId="YOUR_SUBSCRIBER_ID"
        open={open}
      />
      <button onClick={() => setOpen(!open)}>Toggle Inbox</button>
    </>
  );
}

Custom Notification item

Customize the notification item by passing a render function to the renderNotification prop. You can access the notification object and render the notification item as per your requirements. The notification.data property allows you acessing the custom information while rendering notification item. You can check how to pass it with the Novu Framework in-app step output here.

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

function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => (
        <div>
          <h3>{notification.subject}</h3>
          <p>{notification.body}</p>
          <p>{notification.data.text}</p>
        </div>
      )}
    />
  );
}

Custom Bell

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

function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      renderBell={(unreadCount) => (
        <div>
          <span>{unreadCount}</span>
        </div>
      )}
    />
  );
}

Handle notification click

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

function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      onNotificationClick={(notification) => {
        // your logic to handle notification click
      }}
    />
  );
}

Redirect on the notification click

The redirect object allows to define the URL to visit when clicking on the notification item. The value will be implicitly passed to the notification and used when click event happens.

Handle notification button clicks

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

function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      onPrimaryActionClick={(notification) => {
        // your logic to handle primary action click
      }}
      onSecondaryActionClick={(notification) => {
        // your logic to handle secondary action click
      }}
    />
  );
}

Redirect on the notification action button click

The redirect object on the primaryAction or secondaryAction prop allows to define the URL to visit when clicking on the notification action button. The value will be implicitly passed to the action buttons and used when click event happens.

Bell

The Bell component is used to display the notification bell icon. It can 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 custom components as children to the Bell component to render the 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>
  );
}

Notifications

The Notifications component is used to display the list of notifications.

Notifications as a list without the Bell and Popover

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

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

Notifications as a list with custom Notification item

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

function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
    >
      <Notifications
        renderNotification={(notification) => (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
            <p>{notification.data.text}</p>
          </div>
        )}
      />
    </Inbox>
  );
}

Preferences

The Preferences component is used to display the preferences. It can be used to show the preferences. Use the Preferences component to show the preferences without the bell and popover.

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

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

Bring your own Popover

component allows you to bring your own popover component along with custom components. Below is an example of how you can bring your own popover component 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;