预译

Preact 最小翻译( i18n) 库
套装大小:~1KB

安装

最低要求: 预告 10.0.0

使用 Yarn :

yarn add @denysvuika/preact-translate

利用国家预防机制:

npm i @denysvuika/preact-translate

基本用途

你应该把你的申请包在 TranslateProvider 组件 :

import { TranslateProvider } from '@denysvuika/preact-translate';

export default function App() {
  return (
    <TranslateProvider>
      <MainComponent />
    </TranslateProvider>
  );
}

创建一个 assets/en.json 包含以下内容的文件 :

{
  "title": "Hello",
  "subtitle": "World"
}

创建第二个文件 assets/ua.json 可以在不同的资源之间切换.

{
  "title": "[ua] Hello",
  "subtitle": "[ua] World"
}

你现在可以使用 TranslateContext 在访问翻译 API 和数据的组件中:

import { useContext } from 'preact/hooks';
import { TranslateContext } from '@denysvuika/preact-translate';

export default function MainComponent() {
  const { setLang, t, lang } = useContext(TranslateContext);

  return (
    <div>
      <div>Lang: {lang}</div>
      <div>{t('title')}</div>
      <div>{t('subtitle')}</div>
      <div>
        <button onClick={() => setLang('en')}>EN</button>
        <button onClick={() => setLang('ua')}>UA</button>
      </div>
    </div>
  );
}

给 EN 语言:

Lang: en
Hello
World

给 UA 语言:

Lang: ua
[ua] Hello
[ua] World

语言加载按要求执行 . 这个 en.json 只有在您的应用程序第一次要求时才加载并缓存 .

配置资产根文件夹

默认情况下 assets 文件夹用于获取本地地址 . 你可以通过 TranslateProvider.root 属性 :

import { TranslateProvider } from '@denysvuika/preact-translate';

export default function App() {
  return (
    <TranslateProvider root="i18n">
      <MainComponent />
    </TranslateProvider>
  );
}

格式翻译

您可以在翻译文本时使用运行时字符串替换

{
  "hello": "Hello, {name}"
}

然后在JSX中:

<div>{t('hello', { name: 'Bob' })}</div>

编译

库支持有嵌入级的复杂对象.

把下面放进 en.json 文件 :

{
  "messages": {
    "errors": {
      "404": "Sorry, not found"
    }
  }
}

在JSX中

<div>{t('messages.errors.404')}</div>

也可以使用下列复合字符串:

{
  "messages.errors.404": "Sorry, not found"
}

默认语言

您可以通过指定 TranslateProvider.lang 属性.

<TranslateProvider lang="ua">
  <Application />
</TranslateProvider>

请注意,在此情况下,提供者将在启动时加载并缓存两个地块: en.json (作为后退)和 ua.json (作为一个活跃的朗语).

自定义翻译数据

你用得着 TranslateProvider.translations 属性,以提供代码中的自定义翻译数据. 这对单位测试也有帮助.

const data = {
  en: {
    messages: {
      404: 'Not found'
    }
  }
};

<TranslateProvider translations={data}>
  <Application />
</TranslateProvider>;

注意 TranslateProvider 将不获取此选项的翻译文件 en 语言, 并使用您的自定义数据.