Notifications
NotificationList, Notification and NotificationAnnouncer show the notifications in client.notifications: a list for each part of the screen, the notification it shows, and an announcer that reads each new one to screen readers. Notifications UI explains how they work together. This page lists their props.
All three are keys in ComponentContext, so a component registered under the same key with WithComponents replaces each one.
NotificationList
NotificationList shows the notifications for one panel, one at a time, and queues the rest. The SDK renders one in each panel: the message lists, the channel list, the thread list and each open modal.
| Prop | Type | Default | Description |
|---|---|---|---|
panel |
NotificationTargetPanel |
The panel the list serves: "channel", "thread", "channel-list", "thread-list" or "modal". Also adds the class str-chat__notification-list--<panel>. |
|
fallbackPanel |
NotificationTargetPanel |
"channel" |
The panel a notification with no panel tag belongs to. |
filter |
(notification: Notification) => boolean |
Narrows what the list shows, after routing and the display filter. Declare it outside the component: a new function on every render resubscribes the list. | |
pickNext |
(notifications: Notification[], displayed: Notification | null) => Notification | null |
createDefaultPickNext(pickOldest) |
Picks the notification to show next. createDefaultPickNext(pickNewest) shows the newest queued notification instead of the oldest. |
minDisplayMs |
number |
1000 |
How long a notification stays before a queued one can replace it. A repeat of the same type, or a dismissal, doesn't wait. |
enterFrom |
"bottom" | "top" | "left" | "right" |
"bottom" |
The side a notification slides in from. An entryDirection in the notification's metadata or origin.context takes precedence. |
verticalAlignment |
"bottom" | "top" |
"bottom" |
Where the notification sits in the list. |
className |
string |
A class for the list's element. |
NotificationList never shows a system notification, whatever its filters say.
Notification
Notification renders one notification: its severity icon, its translated text, its action buttons and, when it applies, a close button. It forwards its ref to its root element: NotificationList starts a notification's countdown once that element is visible, so a replacement must forward its ref too.
| Prop | Type | Default | Description |
|---|---|---|---|
notification |
Notification |
required | The notification, from client.notifications. |
Icon |
ComponentType<{ notification: Notification }> |
an icon for the severity | The icon. The default renders none for info. |
showClose |
boolean |
false |
Shows the close button. A persistent notification, one without a duration, always shows it. |
onDismiss |
() => void |
removes the notification | Called when the user closes the notification. |
className |
string |
A class for the notification's element. | |
entryDirection |
"bottom" | "top" | "left" | "right" |
Set by NotificationList: the side the notification slides in from. |
|
transitionState |
"enter" | "exit" |
Set by NotificationList: whether the notification is entering or leaving. |
NotificationAnnouncer
NotificationAnnouncer reads each new notification to screen readers, whether a list shows it or not, system notifications included. Chat renders it, and reads it from the components above it: register a replacement with WithComponents around Chat. Notifications accessibility explains what it reads and shows a replacement.
| Prop | Type | Default | Description |
|---|---|---|---|
notificationFilter |
(notification: Notification) => boolean |
every notification | Which notifications it reads. |
buildNotificationAnnouncement |
({ defaultMessage, notification, translatedMessage }) => string |
returns defaultMessage |
What it says for a notification. Return an empty string to say nothing. |
defaultMessage is the translated text after a severity prefix, such as "Error notification: Error adding flag". translatedMessage is the text alone, as the notification shows it.