Skip to main content

Internationalization

Initialization​

Tushan provides built-in support for internationalization (i18n) for some language systems, and the usage is straightforward.

import { TushanContextProps } from 'tushan';
import { i18nEnTranslation } from 'tushan/client/i18n/resources/en';
import { i18nZhTranslation } from 'tushan/client/i18n/resources/zh';

const i18n: TushanContextProps['i18n'] = {
  languages: [
    {
      key: 'en',
      label: 'English',
      translation: i18nEnTranslation,
    },
    {
      key: 'zh',
      label: '简体中文',
      translation: i18nZhTranslation,
    },
  ],
};

Assign it to the Tushan component for initialization.

<Tushan
  i18n={i18n}
>
  {...}
</Tushan>

The first language in the languages array will be your default language.

Single Language Support​

If you only need to support a single language without internationalization, you can specify only one language to make Tushan default to the translation of the language you want.

Language Switch Button​

When multiple languages are specified, a language switch button will appear in the top right corner.

Resource Texts​

In addition to the built-in system texts, you can also customize some texts.

For the presentation of resource related content, tushan has a special handling mechanism.

For example:

const i18n: TushanContextProps['i18n'] = {
  languages: [
    {
      key: 'en',
      label: 'English',
      translation: {
        ...i18nEnTranslation,
        resources: {
          users: {
            name: 'User',
            fields: {
              id: 'ID',
              email: 'Email',
              avatar: 'Avatar',
            },
          },
        },
      },
    },
  ],
};

The system will automatically load the translation of the corresponding resource path without manually specifying the label configuration for the fields.

Custom Texts​

For the usage of custom texts, it is generally as follows:

import { useTranslation } from 'tushan';

function Foo() {
  const { t } = useTranslation();
  
  return <div>{t('some.path')}</div>
}