@xiping/react-i18n

一个基于Zustand的React国际化库，支持多语言、本地和远程资源加载。

特性

• 基于Zustand的状态管理
• 支持多语言切换
• 支持本地和远程资源加载
• TypeScript类型友好
• 支持参数替换
• 支持本地存储语言偏好

安装

npm install @xiping/react-i18n
# 或
yarn add @xiping/react-i18n
# 或
pnpm add @xiping/react-i18n

基本用法

1. 设置I18nProvider

import { I18nProvider } from '@xiping/react-i18n';

// 本地资源
const localResources = {
  'zh-CN': {
    hello: '你好',
    welcome: '欢迎, {name}!',
  },
  'en-US': {
    hello: 'Hello',
    welcome: 'Welcome, {name}!',
  },
};

// 创建本地资源加载器
const resourceLoader = (locale: string) => localResources[locale];

function App() {
  return (
    <I18nProvider
      options={{
        defaultLocale: 'zh-CN',
        locales: ['zh-CN', 'en-US'],
        resourceLoader,
      }}
    >
      <YourApp />
    </I18nProvider>
  );
}

2. 在组件中使用

import { useI18n } from '@xiping/react-i18n';

function Greeting() {
  const { t, locale, setLocale } = useI18n();
  
  return (
    <div>
      <h1>{t('hello')}</h1>
      <p>{t('welcome', { name: 'John' })}</p>
      
      <div>
        <button 
          onClick={() => setLocale('zh-CN')}
          disabled={locale === 'zh-CN'}
        >
          中文
        </button>
        <button 
          onClick={() => setLocale('en-US')}
          disabled={locale === 'en-US'}
        >
          English
        </button>
      </div>
    </div>
  );
}

高级用法

远程资源加载

import { I18nProvider, createRemoteResourceLoader } from '@xiping/react-i18n';

// 创建远程资源加载器
const resourceLoader = createRemoteResourceLoader('https://api.example.com/i18n');

function App() {
  return (
    <I18nProvider
      options={{
        defaultLocale: 'zh-CN',
        locales: ['zh-CN', 'en-US'],
        resourceLoader,
      }}
    >
      <YourApp />
    </I18nProvider>
  );
}

混合资源加载（本地+远程）

import { I18nProvider, createHybridResourceLoader } from '@xiping/react-i18n';

// 本地资源
const localResources = {
  'zh-CN': {
    hello: '你好',
  },
  'en-US': {
    hello: 'Hello',
  },
};

// 创建混合资源加载器
const resourceLoader = createHybridResourceLoader(
  localResources,
  'https://api.example.com/i18n'
);

function App() {
  return (
    <I18nProvider
      options={{
        defaultLocale: 'zh-CN',
        locales: ['zh-CN', 'en-US'],
        resourceLoader,
      }}
    >
      <YourApp />
    </I18nProvider>
  );
}

自定义存储键名

<I18nProvider
  options={{
    defaultLocale: 'zh-CN',
    locales: ['zh-CN', 'en-US'],
    resourceLoader,
    storageKey: 'my_app_locale', // 自定义存储键名
    loadFromStorage: true, // 是否从本地存储加载语言设置
  }}
>
  <YourApp />
</I18nProvider>

API

I18nProvider

i18n提供者组件，用于包装应用程序。

属性

• options: i18n配置选项
  • defaultLocale: 默认语言
  • locales: 支持的语言列表
  • resourceLoader: 语言资源加载器
  • storageKey: 本地存储的语言键名
  • loadFromStorage: 是否在初始化时从本地存储加载语言设置

useI18n

使用i18n的钩子。

返回值

• locale: 当前语言
• locales: 支持的语言列表
• loading: 是否正在加载资源
• error: 错误信息
• setLocale: 设置语言的函数
• t: 翻译函数

工具函数

• createLocalResourceLoader: 创建本地资源加载器
• createRemoteResourceLoader: 创建远程资源加载器
• createHybridResourceLoader: 创建混合资源加载器

许可证

MIT