# 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](/chat/docs/sdk/react/guides/customization/adding_messagelist_notification/). Here, we only replace the text using the Stream [`i18n` instance](/chat/docs/sdk/react/guides/theming/translations/).

## 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.

```tsx
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](https://github.com/GetStream/stream-chat-react/blob/master/src/i18n/en.json).

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

## The Result

![Custom Connection Status Message for Chat](/data/docs/chat-sdk/react/v13-latest/_assets/ConnectionStatus.png)


---

This page was last updated at 2026-03-13T13:15:42.081Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/guides/theming/connection_status/](https://getstream.io/chat/docs/sdk/react/guides/theming/connection_status/).