<Currency>

概要

<Currency>コンポーネントは数値を通貨として表示します。 数値は現在のロケールと渡されたオプションパラメータに基づいてフォーマットされます。 通貨コンポーネントはフォーマットのみを処理し、為替レート計算は行いません。

<Currency>{100}</Currency>
// Output: $100.00

すべての再フォーマットはIntl.NumberFormatライブラリを使用してローカルで処理されます。

リファレンス

プロパティ

説明

戻り値

フォーマットされた通貨を文字列として含む JSX.Element。

例

基本的な例

<Currency>コンポーネントは、ローカライズされた通貨値を表示するために使用できます。

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency> {item.price} </Currency>
  );
}

通貨の指定

ここでは価格をユーロで表示しています。

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

<Currency>コンポーネントの翻訳

通貨を翻訳される文章の中で表示したい場合があります。 <Currency>コンポーネントを<T>コンポーネントでラップできます。

import { T, Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      The price is <Currency> {item.price} </Currency>.
    </T> 
  );
}

カスタムフォーマット

ここでは、小数点以下の桁数を正確に指定し、通貨の狭いシンボルを使用する（つまり、「US$100」ではなく「$100」）GBPで価格を表示しています。 その他のオプションについては、Intl.NumberFormatOptionsの詳細をお読みください。

import { Currency } from 'gt-next';

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>などの他の変数コンポーネントの詳細と使用例については、 変数コンポーネントの使用ドキュメントを参照してください。