> ## Documentation Index
> Fetch the complete documentation index at: https://docs.suprsend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Internationalization

> Translate Inbox and feed UI text into your user's locale in React using SuprSendI18nProvider, custom translations, and locale switching.

To enable internationalization in your inbox, you need to wrap your components in `SuprSendI18nProvider`. This provider will take care of loading the translations and providing them to your components.
This context provider is present in both `@suprsend/react` and `@suprsend/react-core` packages.

<CodeGroup>
  ```javascript Inbox theme={"system"}
  <SuprSendI18nProvider locale="fr">
    <Inbox />
  </SuprSendI18nProvider>
  ```

  ```javascript Feed theme={"system"}
  <SuprSendI18nProvider locale="fr">
    <NotificationFeed />
  </SuprSendI18nProvider>
  ```
</CodeGroup>

`locale` is optional param which defaults to English language. We support translations for below languages internally.

* `en` - [English](https://github.com/suprsend/suprsend-react-core/blob/main/src/i18n/languages/en.ts#L5) (default)
* `fr` - [French](https://github.com/suprsend/suprsend-react-core/blob/main/src/i18n/languages/fr.ts#L5)
* `de` - [German](https://github.com/suprsend/suprsend-react-core/blob/main/src/i18n/languages/de.ts#L5)
* `es` - [Spanish](https://github.com/suprsend/suprsend-react-core/blob/main/src/i18n/languages/es.ts#L5)
* `ar` - [Arabic](https://github.com/suprsend/suprsend-react-core/blob/main/src/i18n/languages/ar.ts#L5)

If you want to use other languages that are not supported by us or to override strings of existing languages, you can pass `translations` prop to `SuprSendI18nProvider`.

<CodeGroup>
  ```typescript Translations theme={"system"}
  interface ITranslations {
    notifications?: string;
    markAllAsRead?: string;
    noNotificationsTitle?: string;
    noNotificationsDescription?: string;
    pinned?: string;
    markAsUnread?: string;
    markAsRead?: string;
    archive?: string;
    expiresIn?: string;
    minute?: string;
    minutes?: string;
    hour?: string;
    hours?: string;
    day?: string;
    days?: string;
    week?: string;
    weeks?: string;
    month?: string;
    months?: string;
    year?: string;
    years?: string;
  }
  ```

  ```javascript Example theme={"system"}
  <SuprSendI18nProvider
    locale="fr"
    translations={{ notifications: "Test", markAllAsRead: "Mark All Read" }}
  >
    <Inbox />
  </SuprSendI18nProvider>

  ```
</CodeGroup>