soon-i18n 搞定国际化，超简单

Soon I18n 是一个轻量级的多语言库

• 可以与任何框架结合使用
• 类型安全
• 轻量，不到3K
• vue , react , solid , svelte 版专属特性
  • 当切换语言时，保持组件状态
  • 懒加载，只加载当前页面需要使用的片段

npm包如下:

• soon-i18n
• soon-i18n-react
• soon-i18n-vue
• soon-i18n-solid
• soon-i18n-svelte

完整文档

下面以react为例 (文档中有其他框架的说明和示例）

安装

npm install soon-i18n-react

完整案例

soon-admin-react-nextjs
or

npx degit https://github.com/leafio/soon-i18n/packages/soon-i18n-react/demo

使用说明

创建实例

import { createI18n } from "soon-i18n-react";
const en_global = {
  welcome: "Welcome {name}",
} as const;
const zh_global = {
  welcome: "欢迎 {name}",
} as const;

const global_locales = {
  zh: zh_global,
  en: en_global,
};
export const { tLocales, getLang, setLang, useLocales, useLang } =
  createI18n({ lang: "zh", fallbacks: ["en"] }, global_locales);

在 js/ts 中使用

import { tLocales } from "../lang";
export const showToast = () => {
    //格式化示例
  const t = tLocales({
    zh: {  eat: (appleNum: number, pearNum: number) =>
      `我吃了${appleNum}个苹果和${pearNum}个梨`, },
    en: {  eat: (appleNum: number, pearNum: number) => {
    return (
      (appleNum === 1 ? "I ate an apple" : `I ate ${appleNum} apples`) +
      " and " +
      (pearNum === 1 ? "a pear" : ` ${pearNum} pears`)
    );
  }, },
  });
  alert(t("eat",2,1));
  // lang为zh时， 我吃了2个苹果和1个梨  
  // lang为en时， I ate 2 apples and a pear
};

在组件中使用

//file ./locales/zh
const zh_locale = {world: "世界"}
export default zh_locale;
//file ./locales/en
const en_locale = {world: "World"}
export default en_locale;

import { useLocales } from "../lang";

const Content = () => {
     //异步懒加载示例
    const t = useLocales({
    zh: () => import("./locales/zh"),
    en: () => import("./locales/en"),
    });
  return <div>{t("world")}</div>;
};
export default Content;

切换语言

import { useLang } from "../lang";

const SwitchLang = () => {
  const [lang, setLang] = useLang();
  const handleToggle = () => {
    setLang(lang === "en" ? "zh" : "en");
  };
  return <button onClick={handleToggle}>{lang}</button>;
};
export default SwitchLang;