Notifications UI Components

ℹ️

Before you can use these UI Components, RoqProvider needs to be installed.

`<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.

Integration

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

import {NotificationBell} from '@roq/ui-react';
 
function TopBar() {
    return (
        <NotificationBell/>
    );
}

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

`<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.

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

Prop	Type	Description	Default
panel	"notifications" or "preferences"	Controls which view to show in the modal	"notifications"
onClose	function	Callback, fired when the modal is closed	null

API Overview