Types

InlineTranslationOptions

InlineTranslationOptions型のAPIリファレンス

概要

InlineTranslationOptions 型は、インライン翻訳に変数を渡し、その表示動作を指定するために使用します。 翻訳にコンテキストや識別子を付与することもできます。 これは、インラインの文字列翻訳に変数を渡すために、useGT()getGT()msg() と併用します。

ビルド時の翻訳: useGT()getGT()msg() では変数自体は翻訳されず、元の文字列のみが対象です。 動的コンテンツを含む文字列の翻訳については、tx() を参照してください。

リファレンス

パラメータ

PropTypeDefault
variables??
Record<string, any>
undefined

説明

プロパティ説明
variables各値が文字列内のどこにマッピングされるかを識別するキーを持つオブジェクト。
$contextオプションでvariablesオブジェクトに$contextを変数として含めて、コンテンツのコンテキストを提供する(翻訳に使用)。
$idオプションでvariablesオブジェクトに$idを変数として含めて、翻訳エディタで使用する識別子を提供する。

コンテキスト

文字列にコンテキストを追加するには、$context プロパティを使用します。

Component.tsx
import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};

変数の渡し方

文字列に変数を追加するには、{variable-name} 構文を使用します。ここで、波括弧は変数名を囲みます。

Component.tsx
import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};

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

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

Component.tsx
import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

ICU メッセージフォーマットの詳細については、ICU メッセージフォーマットのドキュメントを参照してください。


注意

  • InlineTranslationOptions はインライン文字列の翻訳に使用します。
  • variables オブジェクトはテキストに値を渡します。
  • variablesOptions オブジェクトは変数の挙動を定義します。

次のステップ

  • インライン文字列翻訳の詳細については、useGT()getGT()を参照してください。
  • フォーマットオプションの詳細については、ICU message formatを参照してください。

このガイドはいかがですか?