Components
<Currency>
<Currency>コンポーネントのAPIリファレンス
概要
<Currency>
コンポーネントは、数値を通貨として表示します。
数値は現在のロケールおよび渡された任意のパラメータに基づいてフォーマットされます。
この通貨コンポーネントはフォーマットのみを行い、為替レートの計算は行いません。
<Currency>{100}</Currency>
// Output: $100.00
すべての再フォーマットは、Intl.NumberFormat
ライブラリを使用してローカルで処理されます。
リファレンス
Props
Prop | Type | Default |
---|---|---|
locales?? | string[] | undefined |
options?? | Intl.NumberFormatOptions | {} |
currency?? | string | "USD" |
value?? | string | number | undefined |
name?? | string | undefined |
children?? | any | undefined |
説明
Prop | 説明 |
---|---|
children | コンポーネント内にレンダリングされる内容。通常は通貨としてフォーマットされる値を表す数値です。指定された場合、value prop より優先されます。 |
name | メタデータ用途で使用される通貨フィールドのオプション名です。 |
value | 通貨のデフォルト値。指定されていない場合はchildrenが使用されます。文字列または数値を指定できます。文字列はフォーマット前に数値へ変換されます。 |
currency | "USD" や "EUR" などの通貨タイプ。通貨の記号やフォーマット方法を決定します。 |
options | 通貨のフォーマットオプション(Intl.NumberFormatOptions 仕様に準拠)。最大小数点桁数やグルーピングなどのスタイルを定義する際に使用します。 |
locales | フォーマットに使用するロケールを指定するオプション。指定しない場合はユーザーのデフォルトロケールが使用されます。ロケールの指定方法についてはこちらをご覧ください。 |
戻り値
フォーマットされた通貨を文字列として含む JSX.Element
を返します。
例
基本的な例
<Currency>
コンポーネントは、ローカライズされた通貨の値を表示するために使用できます。
import { Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<Currency> {item.price} </Currency>
);
}
通貨の指定
ここでは、価格をユーロで表示しています。
import { Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<Currency currency="EUR"> {item.price} </Currency>
);
}
<Currency>
コンポーネントの翻訳
通貨を、翻訳された文の中で表示したい場合があります。
その場合は、<Currency>
コンポーネントを <T>
コンポーネントでラップできます。
import { T, Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<T id="itemPrice"> // [!code highlight]
The price is <Currency> {item.price} </Currency>.
</T>
);
}
カスタムフォーマット
ここでは、価格をGBPで表示し、小数点以下の桁数を正確に指定し、通貨のナローシンボル(例:"$100"、"US$100" ではなく)を使用しています。 さらに多くのオプションについては、Intl.NumberFormatOptions をご覧ください。
import { Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<Currency
currency="GBP"
options={{
currencyDisplay: 'narrowSymbol',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}}
>
{item.price}
</Currency>
);
}
注意事項
<Currency>
コンポーネントは、現在のロケールおよび渡された任意のパラメータに基づいて通貨の値をフォーマットするために使用されます。- この通貨コンポーネントはフォーマットのみを行い、為替レートの計算は行いません。
<Currency>
コンポーネントの内容は翻訳のためにAPIへ送信されません。 すべての再フォーマットは、Intl.NumberFormat
ライブラリを使用してローカルで行われます。
次のステップ
<Currency>
コンポーネントや、<Num>
,<DateTime>
,<Var>
などの他の変数コンポーネントの詳細や使用例については、変数コンポーネントの使い方 ドキュメントをご覧ください。
このガイドはいかがですか?