tencent cloud

Feedback

Last updated: 2024-09-09 19:45:25

    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.
    
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support