Connection Status

This example shows how to change the text in the ConnectionStatus component. It appears when there’s a connection issue with the Stream Chat API.

This component is rendered within MessageList via DefaultMessageListNotifications. To override all notifications, see the detailed example. Here, we only replace the text using the Stream i18n instance.

Best Practices

• Use i18n overrides for text changes instead of custom components.
• Keep connection copy clear and reassuring to users.
• Avoid over-alerting; show status only when connection is degraded.
• Reuse keys from the default locale to keep translations aligned.
• Test connection states in offline/slow networks.

Implementation

The first step is to create an instance of Streami18n and pass it into the Chat component.

const i18nInstance = new Streami18n();

<Chat client={client} i18nInstance={i18nInstance}>
  ...
</Chat>;

Next, override the default message text via key/value pairs. See the full list of overridable values.

const i18nInstance = new Streami18n({
  language: "en",
  translationsForLanguage: {
    "Connection failure, reconnecting now...":
      "Alert, connection issue happening",
  },
});

The Result