Docs Overview/
Chat/
UIKit/
Web/
Localization/
React/

React

Description

React UIKit comes with English, Japanese, Korean, Chinese language packs by default for the interface display language.
According to the guide in this document, you can either utilize the default language pack or the advanced customization aspects of internationalization, which include adding new languages, new terms, or modifying existing translations.




Utilizing the Built-in Language and Lexicon

If your App only requires English / Japanese / Korean / Chinese languages and you do not need to add new entries or modify existing translations, please refer to this section.

Specify Language

If you need to specify the language, you must set language when introducing UIKitProvider.
  // language support en-US / zh-CN / ja-JP / ko-KR
  <UIKitProvider language={'en-US'}></UIKitProvider>

Dynamic Language Switching

Dynamically switch the language of React UIKit:
import React, { useState } from 'react';
import { UIKitProvider } from '@tencentcloud/chat-uikit-react';

// language support en-US / zh-CN / ja-JP / ko-KR
const languageList = ['en-US','zh-CN','ja-JP','ko-KR']

export default function SampleChat() {
  // language setting
  const [currentLanguage, setCurrentLanguage] = useState('en-US');
  const changeLanguage = (language) => {
    setCurrentLanguage(language);
  };
  
  return (
    // select language
    // <div @click="changeLanguage('en-US')">English</div>
    <UIKitProvider language={currentLanguage}>
      ...
    </UIKitProvider>
  );
}

Custom language entries

Add Language Entry

If you need to expand or modify the existing English / Japanese / Korean / Chinese language pack terms, you can add or modify the terms in the /TUIKit/src/locales directory.
The directory structure for the 'locales' term package is outlined in the following diagram:





Language term usage

The following uses react-i18next's useTranslation for term translation. For more interface details, please refer to react-i18next.
import { useTranslation } from 'react-i18next';
const { t } = useTranslation();

<p className="tui-contacts-list-title">{t('TUIContact.New Contacts')}</p>

Exchange and Feedback

Join the Telegram technical exchange group or WhatsApp discussion group, benefit from the support of professional engineers, and solve your toughest challenges.