<Currency>

概要

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

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>

このページについて