@ayub-begimkulov/i18n (英语)

小型和类型安全包可以创建多语言界面.

特征

• 基础i18n功能(内插,丰富文本,复数化).
• 腾讯全面支持. 这些类型是推断出来的,不需要用手写任何东西.
• 反应钩和组件.
• 能够同步(从服务器或懒惰地加载)加载翻译.
• 能够使用适合你的复数格式工作.

安装

npm i @ayub-begimkulov/i18n

使用量

基本实例

import { I18N, createPluralize } from "@ayub-begimkulov/i18n";
import en from "./keys/en.json";
import ru from "./keys/ru.json";

const pluralizeEn = createPluralize("en");
const pluralizeRu = createPluralize("ru");

const i18n = new I18N({
  defaultLang: "en",
  languages: {
    en: {
      keyset: en,
      pluralize: pluralizeEn,
    },
    ru: {
      keyset: ru,
      pluralize: pluralizeRu,
    },
  },
});

i18n.get("greeting"); // Hello

用反应

// i18n.ts
import {
  I18N,
  createPluralize,
  useTranslate as useTranslateBase,
  useI18n as useI18nBase,
} from "@ayub-begimkulov/i18n";
import en from "./keys/en.json";
import ru from "./keys/ru.json";

const pluralizeEn = createPluralize("en");
const pluralizeRu = createPluralize("ru");

const i18n = new I18N({
  defaultLang: "en",
  languages: {
    en: {
      keyset: en,
      pluralize: pluralizeEn,
    },
    ru: {
      keyset: ru,
      pluralize: pluralizeRu,
    },
  },
});

export const useTranslate = useTranslateBase<typeof i18n>;
export const useI18n = useI18nBase<typeof i18n>;

// index.tsx
import { I18NProvider } from "@ayub-begimkulov/i18n";
import { i18n } from "./i18n";

// ...

root.render(
  <I18NProvider i18n={i18n}>
    <App />
  </I18NProvider>
);

// component.ts
import { useTranslate } from "./i18n";

const Component = () => {
  const translate = useTranslate();

  return <div>{translate("some_key")}</div>;
};

食谱

开始

参考文献

I18N

负责加载/存储翻译和更新语言的类别。 所有反应功能杠杆 I18N API 在需要时更新组件 .

示例

import { I18N, createPluralize } from "@ayub-begimkulov/i18n";
import en from "./keys/en.json";
import ru from "./keys/ru.json";

const pluralizeEn = createPluralize("en");
const pluralizeRu = createPluralize("ru");

const i18n = new I18N({
  defaultLang: "en",
  languages: {
    en: {
      keyset: en,
      pluralize: pluralizeEn,
    },
    ru: {
      keyset: ru,
      pluralize: pluralizeRu,
    },
  },
});

i18n.get("greeting"); // 'Hello'

useI18n

一个带有i18n的属性/方法返回对象的钩子. 当语言发生变化时更新组件.

示例

const allLanguages = ["en", "ru", "ar"];

const Component = () => {
  const { lang, setLang } = useI18n();

  return (
    <>
      <div>{lang}</div>
      {allLanguages.map((lang) => (
        <div onClick={() => setLang(lang)}>Select {lang}</div>
      ))}
    </>
  );
};

useTranslate

返回翻译函数的钩子 。 使用此钩的组件会随时更新语言变化.

示例

import { useTranslate } from "@ayub-begimkulov/i18n";

const Component = () => {
  const t = useTranslate();

  return <div>{t("welcome")}</div>;
};

createPluralize

为给定的地块创建复数函数,以返回特定项目数的复数格式。 积分 Intl.PluralRules 在引擎盖下.

示例

import { createPluralize } from "@ayub-begimkulov/i18n";

const pluralizeEn = createPluralize("en");

pluralizeEn(1); // 'one'
pluralizeEn(0); // 'other'

I18NProvider

环绕 React 上下文提供者的包装器 。 用来分享 I18N 实例。 大部分用于库钩内部(useI18n编号 :useTranslate) (中文(简体) ).

示例

import { I18NProvider } from '@ayub-begimkulov/i18n';
import { App } from './App';
import { i18n } form './i18n';

root.render(
  <I18NProvider i18n={i18n}>
    <App />
  </I18NProvider>
)

TaggedText

允许在翻译中使用 React 组件的组件.

示例

import { TaggedText, useTranslate } from "@ayub-begimkulov/i18n";

export const Component = () => {
  const t = useTranslate();

  console.log(t("key")); // "<1>Important!</1> Check out <2>the project documentation</2> before using this library"

  return (
    <div>
      <TaggedText
        text={t("key")}
        tags={{
          1: (text) => <strong>{text}</strong>,
          2: (text) => <a>{text}</a>,
        }}
      />
    </div>
  );
};

许可证

麻省理工学院.