このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。
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.
﻿
﻿