Package Exports

remix-i18n
remix-i18n/browser/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remix-i18n) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Remix I18n

中文文档

Overview

Remix I18n is an internationalization library designed for Remix applications, providing simple and easy-to-use APIs for handling multi-language support, translations, and language switching.

Installation

npm install @your-org/remix-i18n
# or
yarn add @your-org/remix-i18n
# or
pnpm add @your-org/remix-i18n

Quick Start

1. Initialize I18n Instance

// app/i18n.ts
import { RemixI18n } from '@your-org/remix-i18n';

export const i18n = new RemixI18n({
  supportedLanguages: ['en', 'zh', 'es'],
  fallbackLng: 'en',
});

// Set translations
const enTranslations = {
  greeting: 'Hello, {{name}}!',
  welcome: 'Welcome to our application',
  menu: {
    home: 'Home',
    about: 'About',
    contact: 'Contact',
  },
};

const zhTranslations = {
  greeting: '你好，{{name}}！',
  welcome: '欢迎使用我们的应用',
  menu: {
    home: '首页',
    about: '关于我们',
    contact: '联系我们',
  },
};

i18n.set('en', enTranslations);
i18n.set('zh', zhTranslations);

2. Provide I18n Context in Root Component

// app/root.tsx
import { I18nProvider } from '@your-org/remix-i18n';
import { i18n } from './i18n';

export default function App() {
  return (
    <I18nProvider i18n={i18n}>
      <Outlet />
    </I18nProvider>
  );
}

3. Use Translations in Components

// app/routes/index.tsx
import { useI18n } from '@your-org/remix-i18n';

export default function Home() {
  const i18n = useI18n();
  return (
    <div>
      <h1>{i18n.t('welcome')}</h1>
      <p>{i18n.t('greeting', { name: 'John' })}</p>
      <nav>
        <ul>
          <li>{i18n.t('menu.home')}</li>
          <li>{i18n.t('menu.about')}</li>
          <li>{i18n.t('menu.contact')}</li>
        </ul>
      </nav>
    </div>
  );
}

4. Switch Languages

// app/routes/settings.tsx
import { useI18n } from '@your-org/remix-i18n';

export default function Settings() {
  const i18n = useI18n();

  const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    i18n.locale(e.target.value);
  };

  return (
    <div>
      <h2>Settings</h2>
      <select value={i18n.locale()} onChange={handleLanguageChange}>
        <option value="en">English</option>
        <option value="zh">中文</option>
        <option value="es">Español</option>
      </select>
    </div>
  );
}

API Documentation

RemixI18n Class

Constructor

new RemixI18n(options: RemixI18nOptions)

Parameters

supportedLanguages: List of supported languages
fallbackLng: Fallback language

Methods

locale(lang?: string): string Get or set current language
set(lang: string, dict: I18nDict): void Set translation dictionary for specified language
t(key: string, params?: any, lang?: string): string Get translation with support for parameter replacement
setOnChange(fn: (locale: string) => void): void Set callback function for language changes

Components and Hooks

I18nProvider Component Provides I18n context
useI18n() Hook Gets I18n instance

Owner： Willin Wang

Donation ways:

Github: https://github.com/sponsors/willin
Paypal: https://paypal.me/willinwang
Alipay or Wechat Pay: QRCode

License

Apache-2.0

remix-i18n