# 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](https://getstream.io/chat/docs/sdk/react/ui/components/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](https://getstream.io/chat/docs/sdk/react/features/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.

## Used in

- [Notifications UI](https://getstream.io/chat/docs/sdk/react/ui/components/notifications-ui/)
- [Notifications accessibility](https://getstream.io/chat/docs/sdk/react/features/notifications/accessibility/)

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/component-reference/utilities/notifications/](https://getstream.io/chat/docs/sdk/react/component-reference/utilities/notifications/).