Notifications
UI Components

Notifications UI Components

ℹ️

Before you can use these UI Components, please do the basic setup.

<NotificationBell/>

Description

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.

notification-bell-light

Integration

The bell symbol can be integrated by adding this component to your application:

import {NotificationBell} from '@roq/ui-react';
 
function TopBar() {
    return (
        <NotificationBell/>
    );
}
PropTypeDescriptionDefault
type"all" or "unread"Controls the tab that is active by default"all"
modalOpenbooleanControls the state of the modalfalse
iconReactNodeUsed to replace the existing bell iconCurrent icon
onUnseenCountChangedfunctionCallback, fired when a new notification is received, or an existing one is readnull

<NotificationModal/>

Description

The <NotificationModal/> component shows the user's notifications in real-time and also enables the user to configure the preferences. Please refer to the notifications feature guide for more information and instructions.

NotificationModal light

Integration

The notification modal component can be integrated with just one line of code. The component will open a socket connection to ROQ Platform to receive notifications events in real time. The list of notifcations is fetched using the notifications() API.

import {NotificationModal} from '@roq/ui-react';
 
function App() {
    return (
        <NotificationModal/>
    );
}
PropTypeDescriptionDefault
panel"notifications" or "preferences"Controls which view to show in the modal"notifications"
onClosefunctionCallback, fired when the modal is closednull