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

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

​
Behaviour

The <InboxContent /> component can receive all the props that <Inbox /> does, besides the configuration and bell specific ones.

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

Was this page helpful?