useGT()

概要

useGT()関数は、ビルド時に文字列を翻訳するためのフックです。

const t = useGT();

<p>{  t('This text will be translated')  }</p>;

リファレンス

パラメータ

なし

戻り値

提供されたコンテンツを翻訳するコールバック関数 t() です。

(content: string, options?: InlineTranslationOptions) => string

動作

本番環境

CDプロセス中に、t()関数内のすべてのコンテンツは、アプリケーションがデプロイされる前に翻訳されます。 これにより、すべてのロケールで高速な読み込み時間が保証されますが、ビルド時に既知のコンテンツのみを翻訳できます。

生成された翻訳は、設定に応じて（1）CDNに保存されるか、（2）アプリのビルド出力に保存されます。 そこから、翻訳されたコンテンツがユーザーに提供されます。 翻訳が見つからない場合は、元のコンテンツにフォールバックします。

こちらのデプロイメントガイドに従ってください。

開発環境

開発中、t()関数はオンデマンドでコンテンツを翻訳します。 これは、アプリが異なる言語でどのように見えるかをプロトタイピングするのに便利です。 この動作を有効にするには、環境にDev APIキーを追加することを忘れないでください。

開発環境でのオンデマンド翻訳中に遅延が発生します。 これは本番ビルドでは発生しません。

例

基本的な使用方法

useGT()を使用して文字列を翻訳できます。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

注意：「Alice」はユーザーの優先言語に翻訳されます。

変数の使用

辞書翻訳に変数を渡すことができます。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hello, {name}!', { name: 'Alice' })}
    </p>
  );
}

注意：「Alice」は変数であるため、ユーザーの優先言語に翻訳されません。

ICUメッセージフォーマットの使用

gt-reactはICUメッセージフォーマットをサポートしており、変数をフォーマットすることもできます。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 })}
    </p>
  );
}

Notes

• useGT()関数は文字列を翻訳するためのフックです。
• useGT()フックは<GTProvider>コンポーネントでラップされたコンポーネント内でのみ使用できます。
• useGT()による翻訳文字列は、実行時ではなくビルドプロセス中に処理されます（開発時を除く）。

次のステップ

• 辞書を使用して文字列を翻訳するには、useTranslations()を参照してください。
• 翻訳のカスタマイズに関する詳細情報については、InlineTranslationOptionsを参照してください。