tencent cloud

React
Download PDF
Last updated:2025-07-22 14:42:15
React
Last updated: 2025-07-22 14:42:15
Download PDF

Feature Description

React UIKit has built-in English, Japanese, Korean, Chinese (Simplified), and Chinese (Traditional) language packs as the interface display language.




Using Default Supported Languages

If your App only requires English, Japanese, Korean, Chinese (Simplified), or Chinese (Traditional), and does not need new entries or modifications to existing translations, see this section. The following languages are supported by default:
en-US - English
zh-CN - Simplified Chinese
zh-TW - Traditional Chinese
ja-JP - Japanese
ko-KR - Korean
auto - auto-detection
Among them, automatic detection (auto) selects the language in the following priority:
1. Browser language settings.
2. System language settings.
3. Fall back to en-US by default.

Specify a Language

Wrap your application with UIKitProvider and set the language attribute:
  // language support en-US / zh-CN / ja-JP / ko-KR / zh-TW / auto
  <UIKitProvider language={'en-US'}>...</UIKitProvider>

Dynamically Switch Language

Outside UIKitProvider, dynamically switch React UIKit language.
import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';

function App() {
  const [lang, setLang] = useState<'en-US' | 'zh-CN' | 'zh-TW' | 'ja-JP' | 'ko-KR'>('en-US');
  return (
    <div>
      <button onClick={() => setLang('zh-CN')}>Chinese</button>
      <button onClick={() => setLang('en-US')}>English</button>
      <div>{`Current language: ${lang}`}</div>
      <UIKitProvider
        language={lang}
        theme="light"
      >
        <ConversationList />
      </UIKitProvider>
    </div>
  );
}
UIKitProvider within can use the useUIKit Hook to access internationalization features. However, since the useUIKit Hook is based on Context implementation, it cannot be called externally outside <UIKitProvider />.
import React from 'react';
import { useUIKit, UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';

function LanguageSwitch() {
  const { t, language, setLanguage } = useUIKit();
  return (
    <div>
      <div>Current language: ${language}</div>
      <div>{t('Search.Searching')}</div>
      <button onClick={() => setLanguage('en-US')}>English</button>
      <button onClick={() => setLanguage('zh-CN')}>Chinese</button>
    </div>
  );
}

function ChatApp() {
  return (
    <UIKitProvider language="en-US">
     <LanguageSwitch />
    </UIKitProvider>
  );
}

Using Language Entries

Use the hook useUIKit to export the translation function t. useUIKit as a Hook can only be accessed in child components of UIKitProvider.
import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-react';

export default function App() {
  return (
    // init language
    <UIKitProvider language='en-US'>
      <Child />
    </UIKitProvider>
  );
}

function Child() {
    const { t } = useUIKit();
    return <div>{t('TUIChat.No More')}</div>
}

Communication and Feedback

Join the Telegram Technical Exchange Group or WhatsApp communication group to enjoy support from professional engineers and solve your problems.



Was this page helpful?
You can also Contact sales or Submit a Ticket for help.
Yes
No

Doc Feedback