# Notifications text

Use this page to change the text of a notification: a built-in one, or one your app publishes. The text is translated with the rest of the UI, so it follows the user's language.

## Translating notifications

The `Notification` component translates each notification as it renders it, through the `notification` translation topic:

1. A translator registered for the notification's `type` decides the text.
2. Otherwise the SDK's own translators do. There is one for every type `stream-chat` publishes, and a few for types the React components publish. They render keys in the `notification.*` namespace.
3. Otherwise the list renders `notification.message` as it is.

The React components mostly translate their notifications before publishing them: "Message pinned" is `t('common.messagePinned.label')`. So there are three ways to change the text:

- **A notification from a React component:** override the translation key it was published with. When a message action fails with an error message of its own, the notification shows that message. An audio playback error always shows `notification.audioPlaybackError`.
- **A notification from `stream-chat`:** override its `notification.*` key.
- **Text that depends on the notification:** register a translator for its type.

```ts
import { asDynamicKey, Streami18n } from "stream-chat-react";
import type {
  NotificationTranslatorOptions,
  Translator,
} from "stream-chat-react";

const i18nInstance = new Streami18n({
  translationsForLanguage: {
    // Published by stream-chat: an upload that failed.
    "notification.attachmentUploadFailed": "That file could not be uploaded",
    // Published by the pin action, translated at the call site.
    "common.messagePinned.label": "Pinned",
  },
});

// Names the author of the pinned message.
const pinTranslators: Record<
  string,
  Translator<NotificationTranslatorOptions>
> = {
  "api:message:pin:success": ({ options: { notification }, t }) => {
    const message = notification?.origin.context?.message as
      { user?: { name?: string } } | undefined;
    return t(asDynamicKey("myApp.notification.messagePinned"), {
      author: message?.user?.name ?? "someone",
      defaultValue: "Pinned a message from {{ author }}",
    });
  },
};

i18nInstance.translationBuilder.registerTranslators(
  "notification",
  pinTranslators,
);
```

Pass `i18nInstance` to `Chat`. A translator receives the notification as `options.notification`, and returns a string, or `null` to show `notification.message` as it is. Keys of your own go through `asDynamicKey`: see [Localization](https://getstream.io/chat/docs/sdk/react/features/app-experience/localization/#translation-builder) for the translation builder and dictionaries.

## Text the React components don't translate

The React components publish notifications of their own, such as when a message action succeeds or a channel can't be opened. [Notifications](https://getstream.io/chat/docs/sdk/react/reference/notifications/#stream-chat-react) lists every type, with its emitter and when it's published.

Most messages are translated with `t()` before they're published. Two kinds aren't:

- A failed message action whose error carries a message shows that message.
- A failed reminder or save for later, without such a message, shows English text.

The search results and the reply view publish without a panel tag, so their notifications show in the `channel` panel.

Uploads, sending, jumps in the message paginator and poll votes are published by `stream-chat`: see [Notifications](https://getstream.io/chat/docs/sdk/react/reference/notifications/#stream-chat).

Used in: [Notifications UI](https://getstream.io/chat/docs/sdk/react/ui/components/notifications-ui/) and [Connection status](https://getstream.io/chat/docs/sdk/react/features/app-experience/connection-status/).

## Used in

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

---

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