> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Localization

> 19 built-in languages with support for custom translations, fallback languages, and date/time formatting.

<Accordion title="AI Integration Quick Reference">
  | Field               | Value                                                                                            |
  | ------------------- | ------------------------------------------------------------------------------------------------ |
  | Locale prop         | `locale="fr"` on `CometChatProvider`                                                             |
  | Default             | `en-us`                                                                                          |
  | Languages           | 19 built-in: de, en-gb, en-us, es, fr, hi, hu, it, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh, zh-tw |
  | Hook                | `useLocale()` → `{ getLocalizedString, language }`                                               |
  | Static access       | `CometChatLocalize.getSharedInstance()?.t(key)`                                                  |
  | Custom translations | Pass via `CometChatLocalize` constructor or `addTranslation()`                                   |
</Accordion>

## Overview

The UI Kit ships with translations for 19 languages. All user-facing text (button labels, status messages, timestamps, error messages) is resolved through translation keys. Set the `locale` prop on `CometChatProvider` to switch languages.

***

## Setting the Language

```tsx theme={null}
<CometChatProvider locale="fr">
  <MyChatApp />
</CometChatProvider>
```

***

## Supported Languages

| Code    | Language               |
| ------- | ---------------------- |
| `en-us` | English (US) — default |
| `en-gb` | English (UK)           |
| `de`    | German                 |
| `es`    | Spanish                |
| `fr`    | French                 |
| `hi`    | Hindi                  |
| `hu`    | Hungarian              |
| `it`    | Italian                |
| `ja`    | Japanese               |
| `ko`    | Korean                 |
| `lt`    | Lithuanian             |
| `ms`    | Malay                  |
| `nl`    | Dutch                  |
| `pt`    | Portuguese             |
| `ru`    | Russian                |
| `sv`    | Swedish                |
| `tr`    | Turkish                |
| `zh`    | Chinese (Simplified)   |
| `zh-tw` | Chinese (Traditional)  |

***

## Accessing Translations in Components

Use the `useLocale` hook:

```tsx theme={null}
import { useLocale } from "@cometchat/chat-uikit-react";

function MyComponent() {
  const { getLocalizedString, language } = useLocale();

  return <p>{getLocalizedString("message_deleted")}</p>;
  // Renders: "This message was deleted" (en-us)
  // Renders: "Ce message a été supprimé" (fr)
}
```

***

## Adding Custom Translations

Override or add translation keys for a language:

```tsx theme={null}
import { CometChatLocalize } from "@cometchat/chat-uikit-react";

const localize = CometChatLocalize.getSharedInstance();
localize?.addTranslation("en-us", {
  "custom_greeting": "Welcome to our chat!",
  "message_deleted": "Message removed",  // Override built-in key
});
```

***

## Fallback Language

If a key is not found in the current language, the system falls back to the fallback language (default: `en-us`). Configure via `CometChatLocalize`:

```tsx theme={null}
const localize = new CometChatLocalize({
  language: "fr",
  fallbackLanguage: "en-us",
});
```

***

## Date & Time Localization

Date formatting respects the locale. The `CometChatDate` component and all timestamp displays use locale-aware formatting:

* Relative time: "2 minutes ago", "il y a 2 minutes"
* Day names: "Monday", "Lundi"
* Date formats: "12/25/2024" (en-us), "25/12/2024" (en-gb)

***

## Static Access (Non-React Code)

For plugins and utilities that run outside React components:

```tsx theme={null}
import { CometChatLocalize } from "@cometchat/chat-uikit-react";

const t = CometChatLocalize.getSharedInstance()?.t;
const text = t?.("message_deleted") ?? "This message was deleted";
```

***

## Differences from v6

| v6                                    | v7                                        |
| ------------------------------------- | ----------------------------------------- |
| `CometChatLocalize.setLanguage("fr")` | `locale="fr"` prop on `CometChatProvider` |
| Global static state                   | React context via provider                |
| Manual init required                  | Provider handles locale context           |
| Same 19 languages                     | Same 19 languages                         |