Components
<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;
Was this page helpful?