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>
  );
}

Was this page helpful?