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

React

Description

React UIKit comes with English, Japanese, Korean, Chinese (Simplified)，Chinese (Traditional) 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 (Simplified)，Chinese (Traditional) 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 / zh-TW
  <UIKitProvider language={'en-US'}>...</UIKitProvider>

Dynamic Language Switching

Dynamically switch React UIKit language outside of UIKitProvider component
import React, { useState } from 'react';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';

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

export default function App() {
  // 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>
  );
}
Dynamically switch React UIKit language inside of UIKitProvider component
import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/uikit-base-component-react';

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

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

function Child() {
    const { language, setLanguage } = useUIKit();
    setLanguage('zh-CN');
    return <div>current language is {language}</div>
}

Language term usage

Use hook useUIKit to export the translation function t. As a Hook, useUIKit can only be used in subcomponents of UIKitProvider.
import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/uikit-base-component-react';

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

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

Custom language entries

Add or modify language entry

If you need to add or modify the existing English / Japanese / Korean / Chinese (Simplified)，Chinese (Traditional) language entries, refer to the sample code below. For specific entry details, please refer to Github - @tencentcloud/chat-uikit-react/locales.
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';

const additionalLanguageResource = [
  {
    lng: 'de',
    translation: {
      'TUIChat': {
        'No More': 'Nicht mehr',
      },
    },
  },
];

export default function App() {
  return (
    <UIKitProvider language="de" additionalLanguageResources={additionalLanguageResource}>
      <Child />
    </UIKitProvider>
  );
}

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

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.