React

i1n SDK または i18next / react-intl を使用したブリッジモードで、i1n を React に統合します。

セットアップ

Reactプロジェクトでi1n initを実行します。CLIは、react-i18nextまたはi18nextが存在する場合に自動検出して、ネストされたJSON形式を設定します。

i1n SDKを、i18nextを完全に置き換えるスタンドアロンモードで使用するか、既存のライブラリを維持するためにブリッジモード経由で接続することができます。

スタンドアロンモード

プラグアンドプレイのエクスペリエンスを実現するために、i1n Reactプロバイダーパターンを使用します。init()で初期化し、SDKとロケール状態を同期するI1nProviderを作成し、コンポーネントでuseI1n()フックを使用します。

このアプローチは、localStorage による永続的なロケール選択、setLocale() による実行時の言語切り替え、および生成された i1n.d.ts による完全な型安全なオートコンプリートを提供します。外部の i18n ライブラリは不要です。

i18next を使用したブリッジモード

プロジェクトでi18nextを使用している場合、1行で接続できます: registerI1n((key, params) => i18next.t(key, params))。i1nのt()関数は、厳密な型チェックとオートコンプリート機能を備えて、バックグラウンドでi18nextに委譲するようになりました。

react-intl (FormatJS) を使用するプロジェクトでは、registerI1n((key, params) => intl.formatMessage({ id: key }, params)) を使用してください。ブリッジモードは任意の翻訳関数で動作します — registerI1n() に (key, params) => string のコールバックを渡してください。

デプロイメント

ビルドステップまたはCI/CDパイプラインにi1n pullを追加します。生成された翻訳ファイルとi1n.d.tsはリポジトリにコミットされます。

Vite、Create React App、Remix、およびあらゆるReactベースのフレームワークと連携します。

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

React

セットアップ

スタンドアロンモード

i18next を使用したブリッジモード

デプロイメント

関連

ダッシュボード

ブリッジモード