Reactの使用

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

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

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

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

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

読み込み中

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

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

ロケールフック

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

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

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

LanguageSwitcher

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

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

ルートランタイムから受け入れられたロケールリストを読み込み、次のロケールが解決される間の読み込み状態を処理します。

コンポーネントの構成

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

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

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

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

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

それは珍しいはずです。