react-uikit-provider

1 Usage

1.1 Use UIKitProvider Conponents

import { useUIKit, UIKitProvider } from '@tencentcloud/uikit-base-component-react';

function App() {
  return (
    <UIKitProvider theme={'light'} language={'zh-CN'} additionalLanguageResources={[]}>

    </UIKitProvider>
  );
}

1.2 Use Hook useUIKit

import { useUIKit, UIKitProvider } from '@tencentcloud/uikit-base-component-react';

function App() {
  
  const {
    theme,
    setTheme,
    language,
    setLanguage,
  } = useUIKit();

  return (
    <UIKitProvider theme={'light'} language="zh-CN" additionalLanguageResources={[]}>
      <div>current theme: {theme}</div>
      <div>current language: {language}</div>
      <button onClick={() => setTheme('dark')}>set theme to dark</button>
      <button onClick={() => setLanguage('en-US')}>set language to en-US</button>
    </UIKitProvider>
  );

1.3 Use sass utils

@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.uikit-conversation-search {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  @include theme() {
    background-color: get(bg-color-operate);
    color: get(text-color-primary);
  }
}

2 Exports

| Name | Type | |:-----|:-----| | UIKitProvider | ReactNode | | useUIkit | react hook | | i18next | i18n instance |

2.1 UIKitProvider

2.1.1 Props

| Name | Type | Default | Description | |:-----|:-----|:-----|:-----| | theme | string | 'light' | 'light' or 'dark' | | language | string | 'auto' | 'auto' | 'en-US' | 'zh-CN' | 'zh-TW' | 'ja-JP' | 'ko-KR' | | additionalLanguageResources | ILanguageResource[] | [] | { lng: 'de', translation: {reference} } |

interface ILanguageResource {
  lng: string;
  translation: Record<string, any>;
}

2.2 useUIKit

type ReturnType<useUIKit> = {
    chat: any;
    language: string;
    setLanguage: (lng: string) => void;
    t: i18n["t"];
    i18n: i18n;
    theme: string;
    setTheme: React.Dispatch<React.SetStateAction<string>>;
}

2.3 i18next

nothing...

3 Example

3.1 Change Theme in SubComponent

import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';

function App() {
  return (
    <UIKitProvider theme="light">
      <Chat />
      <ThemeSwitcher />
    </UIKitProvider>
    );
}

import { useUIKit } from '@tencentcloud/uikit-base-component-react';

function ThemeSwitcher() {
  const [theme, setTheme] = useUIKit();
  return (
    <div>
      <div>current theme is: {theme}</div>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
    </div>
  );
}

3.2 Language

Chat language resources

3.2.1 add language in UIKitProvider

import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';

const additionalLanguageResource = [
  {
    lng: 'de',
    translations: {
      'Hello World': 'Hallo Welt',
    }
  },
];

function App() {
  return (
    <UIKitProvider language="zh-CN" additionalLanguageResources={additionalLanguage}>
      <Chat />
      <LanguageSwitcher />
    </UIKitProvider>
    );
}

import { useUIKit } from '@tencentcloud/uikit-base-component-react';

function LanguageSwitcher() {
  const [t, language, setLanguage] = useUIKit();
  return (
    <div>
      <div>title: {t('Hello World')}</div>
      <div>current language is: {language}</div>
      <button onClick={() => setLanguage('zh-CN')}>中文</button>
      <button onClick={() => setLanguage('en-US')}>English</button>
    </div>
  );
}

3.2.2 add language in normal ts/js file

import { i18next } from '@tencentcloud/uikit-base-component-react';

const resource = {
  translation: {
    'Hello World': 'Hallo Welt',
  }
}

i18next.addResourceBundle(lng, 'translation', resource.translation, true, false);