概要

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

<Currency>{100}</Currency>
// 出力: $100.00

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

リファレンス

Props

説明

返り値

フォーマット済みの通貨文字列を含む 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">
      価格は<Currency> {item.price} </Currency>です。
    </T> 
  );
}

カスタム書式設定

ここでは、GBP建ての価格を表示し、小数点以下の桁数を明確に指定したうえで、通貨のナロー記号（例：「US$100」ではなく「$100」）を使用しています。 さらに詳しい options については、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> コンポーネントは、現在の locale と渡された任意のパラメータに基づいて通貨の値を整形するために使用されます。
• このコンポーネントは整形のみを行い、為替レートの計算は行いません。
• <Currency> コンポーネントの内容は翻訳のために API に送信されません。 再整形はすべて、Intl.NumberFormat ライブラリを使用してローカルで行われます。

次のステップ

• <Currency> コンポーネントや <Num>、<DateTime>、<Var> などの他の変数コンポーネントの詳細と使用例については、