Multilingual Support ​

Dux Refine uses i18nProvider for default initialization of multilingual support. In the framework, commonly used language packs for Chinese and English are built-in. You only need to add languages in your module to use them globally.

Configuration ​

Language configuration is typically placed in the init lifecycle. You can import language files in JSON format.

import { appContext, createApp } from '@duxweb/dux-refine'
import zhLang from './locales/zh/common.json'
import enLang from './locales/en/common.json'

const init = (context: appContext) => {
  context.createApp('admin', createApp())

  context.addI18n('zh', 'common', zhLang)
  context.addI18n('en', 'common', enLang)
}

import { appContext, createApp } from '@duxweb/dux-refine'
import zhLang from './locales/zh/common.json'
import enLang from './locales/en/common.json'

const init = (context: appContext) => {
  context.createApp('admin', createApp())

  context.addI18n('zh', 'common', zhLang)
  context.addI18n('en', 'common', enLang)
}

Here's an example of a language pack. You can customize the language file according to your module's needs:

// en
{
  "home": "Home"
}

// en
{
  "home": "Home"
}

// zh
{
  "home": "主页"
}

// zh
{
  "home": "主页"
}

Usage ​

In React, you can use the following hook to call the translation function:

import { useTranslate } from "@refinedev/core";

const translate = useTranslate();
return <button>{translate("home")}</button>;

import { useTranslate } from "@refinedev/core";

const translate = useTranslate();
return <button>{translate("home")}</button>;

If you require multilingual support in your configuration, the i18n is globally initialized in the framework. Therefore, you can use the following native method:

import { i18n } from '@duxweb/dux-refine'

i18n.t('home')

import { i18n } from '@duxweb/dux-refine'

i18n.t('home')

For more usage methods, refer to the translate section in the documentation.