@novu/react
API reference for the @novu/react package
Components
The @novu/react package provides React components for building notification UIs.
Inbox
The main component for displaying notifications.
Props
Prop | Type | Default |
---|---|---|
subscriber? | string | Subscriber | - |
subscriberId? | string | - |
routerPush? | RouterPush | - |
preferencesFilter? | PreferencesFilter | - |
tabs? | Tab[] | - |
localization? | Localization | - |
appearance? | Appearance | - |
socketUrl? | string | - |
backendUrl? | string | - |
subscriberHash? | string | - |
applicationIdentifier? | string | - |
Usage
Appearance Configuration
Prop | Type | Default |
---|---|---|
baseTheme? | Theme | Theme[] | - |
animations? | boolean | - |
variables? | Variables | - |
Variables
Prop | Type | Default |
---|---|---|
colorStripes? | string | - |
borderRadius? | string | - |
fontSize? | string | - |
colorRing? | string | - |
colorShadow? | string | - |
colorNeutral? | string | - |
colorCounterForeground? | string | - |
colorCounter? | string | - |
colorSecondaryForeground? | string | - |
colorSecondary? | string | - |
colorPrimaryForeground? | string | - |
colorPrimary? | string | - |
colorForeground? | string | - |
colorBackground? | string | - |
Elements
Prop | Type | Default |
---|---|---|
strong? | ElementStyles | - |
notificationSnoozedUntil__icon? | ElementStyles | - |
notificationDeliveredAt__icon? | ElementStyles | - |
notificationDeliveredAt__badge? | ElementStyles | - |
notificationSnoozeCustomTime_popoverContent? | ElementStyles | - |
notificationSnooze__dropdownItem__icon? | ElementStyles | - |
notificationSnooze__dropdownItem? | ElementStyles | - |
notificationSnooze__dropdownContent? | ElementStyles | - |
preferencesList__skeletonText? | ElementStyles | - |
preferencesList__skeletonSwitchThumb? | ElementStyles | - |
preferencesList__skeletonSwitch? | ElementStyles | - |
preferencesList__skeletonIcon? | ElementStyles | - |
preferencesList__skeletonItem? | ElementStyles | - |
preferencesList__skeletonContent? | ElementStyles | - |
preferencesList__skeleton? | ElementStyles | - |
preferencesListEmptyNotice? | ElementStyles | - |
preferencesListEmptyNoticeContainer? | ElementStyles | - |
preferencesHeader__icon? | ElementStyles | - |
preferencesHeader__title? | ElementStyles | - |
preferencesHeader__back__button__icon? | ElementStyles | - |
preferencesHeader__back__button? | ElementStyles | - |
preferencesHeader? | ElementStyles | - |
channelSwitchThumb? | ElementStyles | - |
channelSwitch? | ElementStyles | - |
channelSwitchContainer? | ElementStyles | - |
channelName? | ElementStyles | - |
channelLabelContainer? | ElementStyles | - |
channelLabel? | ElementStyles | - |
channelsContainer? | ElementStyles | - |
channelsContainerCollapsible? | ElementStyles | - |
channel__icon? | ElementStyles | - |
channelIconContainer? | ElementStyles | - |
channelContainer? | ElementStyles | - |
workflowDescription? | ElementStyles | - |
workflowArrow__icon? | ElementStyles | - |
workflowContainerRight__icon? | ElementStyles | - |
workflowLabelDisabled__icon? | ElementStyles | - |
workflowContainerDisabledNotice? | ElementStyles | - |
workflowLabelContainer? | ElementStyles | - |
workflowLabelHeader? | ElementStyles | - |
workflowLabel? | ElementStyles | - |
workflowContainer? | ElementStyles | - |
moreTabs__dropdownItemRight__icon? | ElementStyles | - |
moreTabs__dropdownItemLabel? | ElementStyles | - |
moreTabs__dropdownItem? | ElementStyles | - |
moreTabs__dropdownContent? | ElementStyles | - |
moreTabs__dropdownTrigger? | ElementStyles | - |
moreTabs__icon? | ElementStyles | - |
moreTabs__button? | ElementStyles | - |
moreActions__dots? | ElementStyles | - |
moreActions__dropdownItemLeft__icon? | ElementStyles | - |
moreActions__dropdownItemLabel? | ElementStyles | - |
moreActions__dropdownItem? | ElementStyles | - |
moreActions__dropdownContent? | ElementStyles | - |
moreActions__dropdownTrigger? | ElementStyles | - |
moreActionsContainer? | ElementStyles | - |
inboxStatus__dropdownItemCheck__icon? | ElementStyles | - |
inboxStatus__dropdownItem__icon? | ElementStyles | - |
inboxStatus__dropdownItemRight__icon? | ElementStyles | - |
inboxStatus__dropdownItemLeft__icon? | ElementStyles | - |
inboxStatus__dropdownItemLabelContainer? | ElementStyles | - |
inboxStatus__dropdownItemLabel? | ElementStyles | - |
inboxStatus__dropdownItem? | ElementStyles | - |
inboxStatus__dropdownContent? | ElementStyles | - |
inboxStatus__dropdownTrigger? | ElementStyles | - |
inboxStatus__title? | ElementStyles | - |
notificationsTabsTriggerCount? | ElementStyles | - |
notificationsTabsTriggerLabel? | ElementStyles | - |
notificationsTabs__tabsTrigger? | ElementStyles | - |
notificationsTabs__tabsContent? | ElementStyles | - |
notificationsTabs__tabsList? | ElementStyles | - |
notificationsTabs__tabsRoot? | ElementStyles | - |
notificationUnsnooze__icon? | ElementStyles | - |
notificationSnooze__icon? | ElementStyles | - |
notificationUnarchive__icon? | ElementStyles | - |
notificationArchive__icon? | ElementStyles | - |
notificationUnread__icon? | ElementStyles | - |
notificationRead__icon? | ElementStyles | - |
notificationUnsnooze__button? | ElementStyles | - |
notificationSnooze__button? | ElementStyles | - |
notificationUnarchive__button? | ElementStyles | - |
notificationArchive__button? | ElementStyles | - |
notificationUnread__button? | ElementStyles | - |
notificationRead__button? | ElementStyles | - |
notificationSecondaryAction__button? | ElementStyles | - |
notificationPrimaryAction__button? | ElementStyles | - |
notificationCustomActions? | ElementStyles | - |
notificationDefaultActions? | ElementStyles | - |
notificationDateActionsContainer? | ElementStyles | - |
notificationDate? | ElementStyles | - |
notificationImageLoadingFallback? | ElementStyles | - |
notificationImage? | ElementStyles | - |
notificationBodyContainer? | ElementStyles | - |
notificationBody__strong? | ElementStyles | - |
notificationBody? | ElementStyles | - |
notificationSubject__strong? | ElementStyles | - |
notificationSubject? | ElementStyles | - |
notificationDot? | ElementStyles | - |
notificationTextContainer? | ElementStyles | - |
notificationContent? | ElementStyles | - |
notification? | ElementStyles | - |
notificationListNewNotificationsNotice__button? | ElementStyles | - |
notificationList__skeletonText? | ElementStyles | - |
notificationList__skeletonAvatar? | ElementStyles | - |
notificationList__skeletonItem? | ElementStyles | - |
notificationList__skeletonContent? | ElementStyles | - |
notificationList__skeleton? | ElementStyles | - |
notificationListEmptyNotice? | ElementStyles | - |
notificationListEmptyNoticeIcon? | ElementStyles | - |
notificationListEmptyNoticeOverlay? | ElementStyles | - |
notificationListEmptyNoticeContainer? | ElementStyles | - |
notificationList? | ElementStyles | - |
notificationListContainer? | ElementStyles | - |
inbox__popoverContent? | ElementStyles | - |
inbox__popoverTrigger? | ElementStyles | - |
inboxContent? | ElementStyles | - |
loading? | ElementStyles | - |
inboxHeader? | ElementStyles | - |
preferencesContainer? | ElementStyles | - |
preferences__button? | ElementStyles | - |
bellDot? | ElementStyles | - |
bellContainer? | ElementStyles | - |
bellIcon? | ElementStyles | - |
root? | ElementStyles | - |
dots? | ElementStyles | - |
tabsTrigger? | ElementStyles | - |
tabsContent? | ElementStyles | - |
tabsList? | ElementStyles | - |
tabsRoot? | ElementStyles | - |
skeletonSwitchThumb? | ElementStyles | - |
skeletonSwitch? | ElementStyles | - |
skeletonAvatar? | ElementStyles | - |
skeletonText? | ElementStyles | - |
back__button? | ElementStyles | - |
snoozeDatePicker__timePickerLabel? | ElementStyles | - |
snoozeDatePicker__timePickerContainer? | ElementStyles | - |
snoozeDatePickerApply__button? | ElementStyles | - |
snoozeDatePickerCancel__button? | ElementStyles | - |
snoozeDatePicker__actions? | ElementStyles | - |
snoozeDatePicker? | ElementStyles | - |
timePickerMinute__input? | ElementStyles | - |
timePickerHour__input? | ElementStyles | - |
timePicker__separator? | ElementStyles | - |
timePicker__periodSelect? | ElementStyles | - |
timePicker__minuteSelect? | ElementStyles | - |
timePicker__hourSelect? | ElementStyles | - |
timePicker? | ElementStyles | - |
datePickerCalendarDay__button? | ElementStyles | - |
datePickerHeaderMonth? | ElementStyles | - |
datePickerCalendar? | ElementStyles | - |
datePickerControlNextTrigger__icon? | ElementStyles | - |
datePickerControlPrevTrigger__icon? | ElementStyles | - |
datePickerControlNextTrigger? | ElementStyles | - |
datePickerControlPrevTrigger? | ElementStyles | - |
datePickerControl? | ElementStyles | - |
datePickerGridHeader? | ElementStyles | - |
datePickerTrigger? | ElementStyles | - |
datePickerGridCellTrigger? | ElementStyles | - |
datePickerGridCell? | ElementStyles | - |
datePickerGridRow? | ElementStyles | - |
datePickerGrid? | ElementStyles | - |
datePicker? | ElementStyles | - |
tooltipTrigger? | ElementStyles | - |
tooltipContent? | ElementStyles | - |
collapsible? | ElementStyles | - |
dropdownItem__icon? | ElementStyles | - |
dropdownItemRight__icon? | ElementStyles | - |
dropdownItemLeft__icon? | ElementStyles | - |
dropdownItemLabelContainer? | ElementStyles | - |
dropdownItemLabel? | ElementStyles | - |
dropdownItem? | ElementStyles | - |
dropdownTrigger? | ElementStyles | - |
dropdownContent? | ElementStyles | - |
popoverClose? | ElementStyles | - |
popoverTrigger? | ElementStyles | - |
popoverContent? | ElementStyles | - |
badge? | ElementStyles | - |
icon? | ElementStyles | - |
input? | ElementStyles | - |
button? | ElementStyles | - |
Bell
A customizable notification bell component.
Props
Prop | Type | Default |
---|---|---|
renderBell? | BellRenderer | - |
Usage
Notifications
A component for rendering a list of notifications.
Props
Prop | Type | Default |
---|---|---|
renderBody? | BodyRenderer | - |
renderSubject? | SubjectRenderer | - |
renderNotification? | NotificationsRenderer | - |
onSecondaryActionClick? | NotificationActionClickHandler | - |
onPrimaryActionClick? | NotificationActionClickHandler | - |
onNotificationClick? | NotificationClickHandler | - |
Usage
InboxContent
A component for building custom notification inboxes.
Props
Prop | Type | Default |
---|---|---|
renderBody? | BodyRenderer | - |
renderSubject? | SubjectRenderer | - |
renderNotification? | NotificationsRenderer | - |
hideNav? | boolean | - |
initialPage? | InboxPage | - |
onSecondaryActionClick? | NotificationActionClickHandler | - |
onPrimaryActionClick? | NotificationActionClickHandler | - |
onNotificationClick? | NotificationClickHandler | - |