Localization

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

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()

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

<CometChatProvider
  appId="YOUR_APP_ID"
  region="us"
  authKey="YOUR_AUTH_KEY"
  uid="cometchat-uid-1"
  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:

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:

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:

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:

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 LocaleProvider
Manual init required	Automatic — provider handles it
Same 19 languages	Same 19 languages