Types
InlineTranslationOptions
InlineTranslationOptions型のAPIリファレンス
概要
InlineTranslationOptions
型は、インライン翻訳に変数を渡し、そのレンダリング動作を指定するために使用されます。
また、翻訳にコンテキストや識別子を付与することもできます。
useGT()
と msg()
と併用して、インライン文字列翻訳に変数を渡します。
ビルド時の翻訳:
useGT()
と msg()
の翻訳はビルド時に行われますが、変数自体は翻訳されません。
代わりに、整形のうえで翻訳文に挿入されます。
必ず デプロイガイド に従ってください。
リファレンス
パラメータ
Prop | Type | Default |
---|---|---|
variables?? | Record<string, any> | undefined |
説明
プロパティ | 説明 |
---|---|
variables | 各値が文字列内のどこにマッピングされるかを識別するキーを持つオブジェクト。 |
$context | オプションでvariables オブジェクトに$context を変数として含めて、コンテンツのコンテキストを提供する(翻訳に使用)。 |
$id | オプションでvariables オブジェクトに$id を変数として含めて、翻訳エディタで使用する識別子を提供する。 |
例
コンテキスト
文字列にコンテキストを追加するために、$context
プロパティを使用します。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};
変数の渡し方
文字列に変数を追加するために、{variable-name}
構文を使用します。ここで、波括弧が変数名を囲みます。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
ICU メッセージフォーマットの使用
gt-react
は ICU メッセージフォーマットをサポートしており、変数をフォーマットすることも可能です。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>
{ t(
'Your account balance: {dollars, number, ::currency/USD}!',
{
"dollars" : 1000000,
}
) }
</div>;
};
ICU メッセージフォーマットの詳細については、ICU メッセージフォーマットドキュメントを参照してください。
注意
InlineTranslationOptions
はインライン文字列の翻訳に使用します。variables
オブジェクトはテキストに値を渡します。variablesOptions
オブジェクトは変数の動作を定義します。
次のステップ
- インライン文字列翻訳の詳細については、
useGT()
を参照してください。 - フォーマットオプションの詳細については、
ICU message format
を参照してください。
このガイドはいかがですか?