<Currency>

概要

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

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

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

リファレンス

Props

Prop	Type	Default
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number`	`undefined`
`currency??`	`string`	`"USD"`
`options??`	`Intl.NumberFormatOptions`	`{}`
`locales??`	`string[]`	`undefined`

説明

Prop	説明
`children`	コンポーネント内にレンダリングするコンテンツ。通常は通貨としてフォーマットされる値を表す数値。提供されている場合、`value` プロップより優先されます。
`name`	メタデータ目的で使用される通貨フィールドのオプション名。
`value`	通貨のデフォルト値。提供されていない場合は children にフォールバックします。文字列または数値であり、文字列はフォーマット前に数値に解析されます。
`currency`	通貨の種類、例えば "USD" や "EUR"。これにより、通貨のシンボルとフォーマットが決まります。
`options`	通貨のフォーマットオプション。`Intl.NumberFormatOptions` 仕様に従います。最大小数桁数、グルーピングなどのスタイルを定義するために使用します。
`locales`	フォーマットのロケールを指定するためのオプションのロケール。提供されていない場合、デフォルトのユーザーのロケールが使用されます。ロケールの指定についての詳細はこちらを参照してください。

戻り値

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

例

基本的な例

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

PriceDisplay.jsx

import { Currency } from 'gt-react'; 
 
export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> 
    );
}

通貨の指定

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

PriceDisplay.jsx

import { Currency } from 'gt-react';
 
export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

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

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

PriceDisplay.jsx

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 を参照してください。

PriceDisplay.jsx

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

<Currency>

このページについて