GitHub

概要

<Currency> コンポーネントは、数値を通貨表記で表示します。数値は現在の locale と、渡された任意のパラメーターに基づいて書式設定されます。このコンポーネントは書式設定のみを行い、為替レートの計算は行いません。

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

すべての書式変更は、Intl.NumberFormat ライブラリによってローカルで処理されます。

参考

Props

Prop

Type

説明

Prop	説明
`children`	コンポーネント内にレンダーするコンテンツ。通常は通貨として書式化する対象の数値。指定された場合は `value` プロップよりも優先されます。
`name`	メタデータ用途で使用される、通貨フィールドの任意の名称。
`value`	通貨のデフォルト値。未指定の場合は `children` が優先されます。文字列または数値を指定可能。文字列は書式化前に数値へパースされます。
`currency`	"USD" や "EUR" などの通貨種別。使用される通貨記号と書式を決定します。
`options`	通貨の任意の書式設定 options。`Intl.NumberFormatOptions` 仕様に従います。最大小数桁数、グルーピングなどのスタイルを指定するために使用します。
`locales`	書式化に使用する対応ロケールの任意指定。未指定の場合はユーザーのデフォルトの locale が使用されます。ロケールの指定についてはこちらを参照してください。

返り値

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

カスタム書式設定

ここでは、GBP建ての価格を表示し、小数点以下の桁数を厳密に指定し、通貨のナロー記号（つまり「US$100」ではなく「$100」）を使用しています。利用可能な options の詳細については、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> コンポーネントは、現在の locale と、渡された任意のパラメータに基づいて金額を通貨表記にフォーマットします。
このコンポーネントはフォーマットのみを行い、為替レートの計算は行いません。
<Currency> コンポーネント内の内容は翻訳のために API に送信されません。すべての再フォーマットは Intl.NumberFormat ライブラリを使用してローカルで実行されます。

次のステップ

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

概要

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

すべての書式変更は、Intl.NumberFormat ライブラリによってローカルで処理されます。

Prop	説明
`children`	コンポーネント内にレンダーするコンテンツ。通常は通貨として書式化する対象の数値。指定された場合は `value` プロップよりも優先されます。
`name`	メタデータ用途で使用される、通貨フィールドの任意の名称。
`value`	通貨のデフォルト値。未指定の場合は `children` が優先されます。文字列または数値を指定可能。文字列は書式化前に数値へパースされます。
`currency`	"USD" や "EUR" などの通貨種別。使用される通貨記号と書式を決定します。
`options`	通貨の任意の書式設定 options。`Intl.NumberFormatOptions` 仕様に従います。最大小数桁数、グルーピングなどのスタイルを指定するために使用します。
`locales`	書式化に使用する対応ロケールの任意指定。未指定の場合はユーザーのデフォルトの locale が使用されます。ロケールの指定についてはこちらを参照してください。

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]
      価格は <Currency> {item.price} </Currency> です。
    </T> 
  );
}

カスタム書式設定

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> コンポーネントは、現在の locale と、渡された任意のパラメータに基づいて金額を通貨表記にフォーマットします。
このコンポーネントはフォーマットのみを行い、為替レートの計算は行いません。
<Currency> コンポーネント内の内容は翻訳のために API に送信されません。すべての再フォーマットは Intl.NumberFormat ライブラリを使用してローカルで実行されます。

次のステップ

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

概要

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

すべての書式変更は、Intl.NumberFormat ライブラリによってローカルで処理されます。

Prop	説明
`children`	コンポーネント内にレンダーするコンテンツ。通常は通貨として書式化する対象の数値。指定された場合は `value` プロップよりも優先されます。
`name`	メタデータ用途で使用される、通貨フィールドの任意の名称。
`value`	通貨のデフォルト値。未指定の場合は `children` が優先されます。文字列または数値を指定可能。文字列は書式化前に数値へパースされます。
`currency`	"USD" や "EUR" などの通貨種別。使用される通貨記号と書式を決定します。
`options`	通貨の任意の書式設定 options。`Intl.NumberFormatOptions` 仕様に従います。最大小数桁数、グルーピングなどのスタイルを指定するために使用します。
`locales`	書式化に使用する対応ロケールの任意指定。未指定の場合はユーザーのデフォルトの locale が使用されます。ロケールの指定についてはこちらを参照してください。

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]
      価格は <Currency> {item.price} </Currency> です。
    </T> 
  );
}

カスタム書式設定

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> コンポーネントは、現在の locale と、渡された任意のパラメータに基づいて金額を通貨表記にフォーマットします。
このコンポーネントはフォーマットのみを行い、為替レートの計算は行いません。
<Currency> コンポーネント内の内容は翻訳のために API に送信されません。すべての再フォーマットは Intl.NumberFormat ライブラリを使用してローカルで実行されます。

次のステップ

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

Currency

このページについて

Currency

このページについて

Currency

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする