Localization - CometChat Docs

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

​Overview

​Setting the Language

​Supported Languages

​Accessing Translations in Components

​Adding Custom Translations

​Fallback Language

​Date & Time Localization

​Static Access (Non-React Code)

​Differences from v6