Here is the English usage guide

A more mini i18n tool

• easy - just two commonly apis
• mini - 2kb
• i18n key support ts check
• Source code visible - you can edit any way, when you copy source code

langs/en.json

{
  "title": "hello world---en",
  "useObject": "days: {days} hours: {hours}",
  "useComp": "i am component: {comp}",
  "visitor": {
    "title": "visitor",
    "name": "visitor",
    "state1": {
      "title": "visitor state"
    }
  }
}

langs/zh.json

{
  "title": "你好，世界---中文",
  "useObject": "天：{days} 小时：{hours}",
  "useComp": "我是组件哈哈哈：{comp}",
  "visitor": {
    "title": "游客",
    "name": "游客",
    "state1": {
      "title": "游客状态"
    }
  }
}

main.ts

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

import zh from './langs/zh.json'
import en from './langs/en.json'
import { initI18n } from 'bxd-i18n/react.jsx'

const i18n = {
  en: en,
  zh: zh,
}

initI18n({
  lang: 'zh',
  i18nData: i18n,
})


createRoot(document.getElementById('root')!).render(
    <App />
)

App.tsx

import React, { useEffect, useState } from 'react'
import { useTranslate } from 'bxd-i18n/react'

function App() {
  const { t, setLang, lang } = useTranslate()

  return (
    <>
      <h1>i18n React Demo</h1>
      <div>base： {t('title')}</div>
      <!-- ts error -->
      <div>not found key： {t('notFound')}</div>
      <div>multi-level： {t('visitor.state1.title')}</div>
      <div>active object： {t('useObject', { days: 1, hours: 2 })}</div>
      <div>use component in object： {t('useObject', { days: 1, hours: <span style={{color: 'red'}}>i am component</span> })}</div>
      <div/>
      <h2>select language</h2>
      <select value={lang} onChange={(e) => setLang(e.target.value as 'en' | 'zh')}>
        <option value="en">English</option>
        <option value="zh">简体中文</option>
      </select>
    </>
  )
}

export default App

support typescript

src/ add a ts global file:

import en from './langs/en.json';
import zh from './langs/zh.json';

declare global {
  interface I18nData {
    en: typeof en;
    zh: typeof zh;
  }

  // get multi-level keys
  type NestedKeyOf<T> = T extends object
    ? {
        [K in keyof T]: K extends string
          ? T[K] extends object
            ? `${K}.${NestedKeyOf<T[K]>}`
            : K
          : never;
      }[keyof T]
    : never;

  type BxdI18nKey = {
    [K in keyof I18nData]: NestedKeyOf<I18nData[K]>
  }[keyof I18nData];
}

// export module
export {};

下面是中文说明

更简单更轻量的i18n工具

• 简单 - just two commonly apis
• mini - 2kb
• i18n key 支持ts类型检测
• 源码可见

langs/en.json

{
  "title": "hello world---en",
  "useObject": "days: {days} hours: {hours}",
  "useComp": "i am component: {comp}",
  "visitor": {
    "title": "visitor",
    "name": "visitor",
    "state1": {
      "title": "visitor state"
    }
  }
}

langs/zh.json

{
  "title": "你好，世界---中文",
  "useObject": "天：{days} 小时：{hours}",
  "useComp": "我是组件哈哈哈：{comp}",
  "visitor": {
    "title": "游客",
    "name": "游客",
    "state1": {
      "title": "游客状态"
    }
  }
}

main.ts

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

import zh from './langs/zh.json'
import en from './langs/en.json'
import { initI18n } from 'bxd-i18n/react'

const i18n = {
  en: en,
  zh: zh,
}

initI18n({
  lang: 'zh',
  i18nData: i18n,
})


createRoot(document.getElementById('root')!).render(
    <App />
)

App.tsx

import React, { useEffect, useState } from 'react'
import { useTranslate } from 'bxd-i18n/react'

function App() {
  const { t, setLang, lang } = useTranslate()

  return (
    <>
      <h1>i18n React Demo</h1>
      <div>常规： {t('title')}</div>
      <!-- ts 提示类型错误 -->
      <div>不存在的key： {t('notFound')}</div>
      <div>多层级的key： {t('visitor.state1.title')}</div>
      <div>动态的、使用对象形式： {t('useObject', { days: 1, hours: 2 })}</div>
      <div>翻译文案中插入组件： {t('useObject', { days: 1, hours: <span style={{color: 'red'}}>i am component</span> })}</div>
      <div/>
      <h2>切换语言</h2>
      <select value={lang} onChange={(e) => setLang(e.target.value as 'en' | 'zh')}>
        <option value="en">English</option>
        <option value="zh">简体中文</option>
      </select>
    </>
  )
}

export default App

typescript 支持

src/ 添加全局ts文件:

import en from './langs/en.json';
import zh from './langs/zh.json';

declare global {
  interface I18nData {
    en: typeof en;
    zh: typeof zh;
  }

  // 遍历获取所有的key
  type NestedKeyOf<T> = T extends object
    ? {
        [K in keyof T]: K extends string
          ? T[K] extends object
            ? `${K}.${NestedKeyOf<T[K]>}`
            : K
          : never;
      }[keyof T]
    : never;

  type BxdI18nKey = {
    [K in keyof I18nData]: NestedKeyOf<I18nData[K]>
  }[keyof I18nData];
}

// export module
export {};