Reactの使用

@18ways/react は、ランタイムプリミティブを提供します。主な仕事は、それらをクリーンにスコープすることです。

ルートモードとスコープモード

根本的に、Ways は API キー、ロケール、受け入れられたロケール、および共有翻訳ストアを所有しています。

ネストされた Ways スコープは、コンテキストのみが必要です:

tsx
<Ways apiKey="pk_dummy_demo_token" locale="es-ES" baseLocale="en-GB" context="checkout">
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

サブツリーに独自のロケールセッションが必要な場合は、スコープ付きの locale オーバーライドに頼るのではなく、独自のルートを与えてください：

tsx
<Ways apiKey="pk_dummy_demo_token" locale="en-GB" baseLocale="en-GB" context="app">
  <MarketingSite />
 
  <Ways apiKey="pk_dummy_demo_token" locale="ja-JP" baseLocale="en-GB" context="hero-demo">
    <EmbeddedLocaleDemo />
  </Ways>
</Ways>

そのネストされたルートは、独自の選択済みロケール、読み込み状態、そしてハイドレート済みストアを持ちます。

読み込み中

翻訳作業をUIに反映させたい場合は、useTranslationLoading()を使用してください。

tsx
import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading = useTranslationLoading();
 
  return <span>{isTranslationLoading ? 'Loading translations...' : 'Ready'}</span>;
}

useTranslationLoading() は、現在のコンテキストに対するブロッキング作業のみを追跡します。LanguageSwitcher のようなルートレベルのコントロールは、すでにルートのランタイム読み込み状態を読み取っています。

サスペンス

<T> と useT() は、トランジションではない読み取りが まだ保留中の場合、最も近い React またはフレームワークの境界へスローします。実際のロケール遷移中は、サスペンドする代わりに、ストアのフォールバックを介して直前に確定したロケールの描画を維持します。ブロッキング作業は suspenseTimeoutMs で上限が設定され、 その後は翻訳の読み込みをバックグラウンドで続けながら、利用可能な最良のフォールバックで描画が継続されます。

ロケールフック

ルートランタイムは、2つの低レベルフックを公開しています:

tsx
import { useCurrentLocale, useSetCurrentLocale } from '@18ways/react';

LanguageSwitcherの代わりに独自のロケールコントロールを構築したいときに使用してください。

LanguageSwitcher

組み込みのスイッチャーは制御可能で、構成可能です。

tsx
<LanguageSwitcher currentLocale={locale} onLocaleChange={setLocale} direction="down" />

ルートのランタイムから受け入れられたロケール一覧を読み取り、次のロケールが解決される間の読み込み状態を処理します。ロケールの切り替え中は、翻訳済み UI は次のロケールの準備が整うまで、最後に確定したロケールをフォールバックとして使い続けます。

コンポーネントの構成

文を一緒に保ち、<T>がUIの形状を保持するようにします。

tsx
<T>
  <a href="/pricing">Click here</a> to see more
</T>

メッセージフォーマッタのエスケープハッチ

デフォルトのフォーマッターは waysParser です。具体的な理由がない限り、これから切り替えないでください。

  • messageFormatter="none" は文字列をそのままにします。
  • カスタムフォーマッタ関数を使用すると、補間を完全に制御できます。

それは珍しいはずです。

React の使い方