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
.
<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';
const languageList = ['en-US','zh-CN','ja-JP','ko-KR']
export default function SampleChat() {
const [currentLanguage, setCurrentLanguage] = useState('en-US');
const changeLanguage = (language) => {
setCurrentLanguage(language);
};
return (
<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
Was this page helpful?