Notification Bell UI component
Introduction
The <NotificationBell/> component renders a bell symbol which informs the user about unread notifications. It opens
the Notification Modal UI Component on click. Please refer to
the notifications feature guide for more information and instructions.
See this component in action on Storybook (opens in a new tab).
Integration
ℹ️
Before you can use these UI Components, please do the basic setup.
<NotificationBell/>
The bell symbol can be integrated by adding this component to your application:
import { NotificationBell } from '@roq/ui-react';
function TopBar() {
return (
<NotificationBell />
);
}<NotificationBell/> Props list
| Prop | Type | Description | Default |
|---|---|---|---|
| type | "all" or "unread" | Controls the tab that is active by default | "all" |
| modalOpen | boolean | Controls the state of the modal | false |
| icon | ReactNode | Used to replace the existing bell icon | Current icon |
| onUnseenCountChanged | function | Callback, fired when a new notification is received, or an existing one is read | null |