<InboxContent />

Learn how to use the InboxContent component with custom popovers and handle notification interactions

By default, <InboxContent /> renders the content of the <Inbox /> popover. This component is meant to be used with a custom popover.

Basic Usage

The InboxContent component provides a flexible way to customize the inbox display while maintaining all the core notification functionality.

import { Bell, Inbox, InboxContent } from '@novu/react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 
export default function CustomPopoverPage() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
      <Popover>
        <PopoverTrigger>
          <Bell />
        </PopoverTrigger>
        <PopoverContent className="h-[500px] w-[400px] overflow-auto p-0">
          <InboxContent />
        </PopoverContent>
      </Popover>
    </Inbox>
  );
}

The <InboxContent /> component can receive all the props that <Inbox /> does, besides the configuration and bell specific ones. This allows for extensive customization of notification handling and display.

import { Bell, Inbox, InboxContent } from '@novu/react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 
export default function CustomPopoverPage() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
      <Popover>
        <PopoverTrigger>
          <Bell />
        </PopoverTrigger>
        <PopoverContent className="h-[500px] w-[400px] overflow-auto p-0">
          <InboxContent
            onNotificationClick={(notification) => {
              // your logic to handle notification click
            }}
            onPrimaryActionClick={(notification) => {
              // your logic to handle primary action click
            }}
            onSecondaryActionClick={(notification) => {
              // your logic to handle secondary action click
            }}
            renderNotification={(notification) => (
              <div>
                <h3>{notification.subject}</h3>
                <p>{notification.body}</p>
                <p>{notification.data.text}</p>
              </div>
            )}
          />
        </PopoverContent>
      </Popover>
    </Inbox>
  );
}

The example above demonstrates how to: - Handle notification clicks - Customize primary and secondary action behaviors - Provide custom rendering for notifications

Basic Usage

Advanced Usage

On this page