<Inbox />
Learn how to use and customize the Inbox component in your React application
By default, the <Inbox />
renders a bell button, that opens a popover on click. The popover contains the notifications list and the user preferences.
Basic Usage
Navigation
The Inbox component uses the routerPush
prop to make your notifications navigatable. We will automatically pass the redirect.url
from your workflow definitions to the routerPush
prop.
To make the navigation work, you will need to specify the routerPush
behaviour depending on your
routing library.
Event Handling
Notification Click
You can handle notification clicks without navigation by using the onNotificationClick
prop.
This is useful for opening modals or drawers instead of navigating to a page.
Action Clicks
Handle action button clicks without navigation using the onPrimaryActionClick
and onSecondaryActionClick
props:
Customization
Controlled Popover State
Custom Notification Item
Custom Notification Subject
Render a custom subject for the notification, while keeping the default notification component.
Custom Notification Body
Render a custom body for the notification, while keeping the default notification component.
Custom Bell
Filtering Preferences
Customize visible preferences using the preferencesFilter
prop to display only relevant
preferences to your users. The filtering works by matching workflow
tags with the specified filter tags
value.
Data object
The data
object is a key-value store within each notification, used to extend <Inbox /> notifications by embedding step-specific metadata. It provides flexible notification handling, supporting both static and dynamic values:
- Static Values: These are hardcoded into the notification step—for example, a string like "status": "merged" or "icon": "heart". These values don’t change based on the recipient or context.
- Dynamic Values: These values are derived from subscriber or payload data. For instance, they can reference
subscriber.firstName
orpayload.issueId
to tailor notifications for individual users.
You can pass data such as:
reactionType
: To display specific icons such as 👍, ❤️, or a comment bubble.entityId
(likepullRequestId
orissueId
): Create direct links or show relevant badges (e.g., a GitHub logo linking to the PR).status
oractionType
: To show visual cues such as colored dots or status icons (e.g., green for 'merged', orange for 'commented').

The data
object is defined within a workflow's in-app step in the Novu dashboard. Each key-value pair, referred to as a property, can be static or dynamic, and you get up to 10 properties per in-app step. These properties are accessible on the frontend via the notification.data
property.
notification.data
is included in the client response, so do not store any sensitive data in it.
By default, notification.data
is untyped. To ensure type safety, declare the NotificationData
interface globally.
This lets TypeScript infer the structure of notification.data
, preventing errors when accessing properties. However, as not all notifications include the same keys, check properties for existence before usage.