# General Translation React SDKs (gt-react, gt-next): Currency
URL: https://generaltranslation.com/ja/docs/react/reference/components/currency.mdx
---

title: Currency
description: General Translation の gt-react を使用して、アクティブなロケールに応じて金額を通貨形式でフォーマットします。Currency の API リファレンス。

---

`<Currency>` コンポーネントは、数値をアクティブなロケールに合わせた通貨形式でレンダリングします。フォーマットのみを行い、為替レートの換算は行いません。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` からインポートしていますが、代わりに使用しているフレームワークのパッケージからインポートしてください。*

## 概要 [#overview]

金額を子要素として渡し、`currency`コードを設定します。

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

すべてのフォーマットは、[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) を使用してローカルで行われます。

## 動作の仕組み [#how-it-works]

* **ローカルでのフォーマット。** 金額はブラウザ内で `Intl.NumberFormat` を使ってフォーマットされます。その値が General Translation API に送信されることはありません。
* **変換は行いません。** `<Currency>` は選択した通貨とロケールに合わせて記号、桁区切り、小数点以下の桁数を整えますが、通貨間の換算は行いません。
* **ロケールの決定。** `locales` で上書きしない限り、フォーマットはアクティブなロケールによって決まります。

## Props [#props]

| Prop                    | 説明                          | Type                       | 任意  | デフォルト      |
| ----------------------- | --------------------------- | -------------------------- | --- | ---------- |
| [`children`](#children) | フォーマットする値。                  | `number \| string`         | いいえ | —          |
| [`currency`](#currency) | ISO 4217 の通貨コード。            | `string`                   | はい  | `USD`      |
| [`options`](#options)   | `Intl.NumberFormat` のオプション。 | `Intl.NumberFormatOptions` | はい  | `{}`       |
| [`locales`](#locales)   | フォーマット時のロケールの上書き。           | `string[]`                 | はい  | アクティブなロケール |
| [`name`](#name)         | エントリの変数名。                   | `string`                   | はい  | —          |

### `children` [#children]

**Type** `number | string` · **必須**

通貨形式でフォーマットする金額です。文字列は、フォーマット前に数値として解析されます。

### `currency` [#currency]

**Type** `string` · **任意** · **デフォルト** `USD`

`USD` や `EUR` などの ISO 4217 通貨コードを指定します。通貨記号とフォーマットがこれによって決まります。

### `options` [#options]

**Type** `Intl.NumberFormatOptions` · **任意** · **デフォルト** `{}`

`currencyDisplay` や小数部の桁数の上限・下限など、[`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) の仕様に準拠したフォーマットオプションです。

### `locales` [#locales]

**型** `string[]` · **任意** · **デフォルト** アクティブなロケール

フォーマットの対象となるロケールです。省略した場合は、アクティブなロケールが使用されます。[locales 引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。

### `name` [#name]

**Type** `string` · **任意**

メタデータ用に使用する、通貨フィールドの名前です。

## 例 [#examples]

```tsx title="PriceDisplay.tsx"
import { Currency } from 'gt-react';

export default function PriceDisplay({ item }) {
  return <Currency>{item.price}</Currency>; // [!code highlight]
}
```

```tsx title="PriceDisplay.tsx"
import { Currency } from 'gt-react';

export default function PriceDisplay({ item }) {
  return <Currency currency="EUR">{item.price}</Currency>; // [!code highlight]
}
```

```tsx title="PriceDisplay.tsx"
import { T, Currency } from 'gt-react';

export default function PriceDisplay({ item }) {
  return (
    <T>
      The price is <Currency>{item.price}</Currency>. // [!code highlight]
    </T>
  );
}
```

```tsx title="PriceDisplay.tsx"
import { Currency } from 'gt-react';

export default function PriceDisplay({ item }) {
  return (
    <Currency
      currency="GBP"
      options={{ // [!code highlight]
        currencyDisplay: 'narrowSymbol',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      }}
    >
      {item.price}
    </Currency>
  );
}
```

## メモ [#notes]

* `<Currency>` は、アクティブなロケールに合わせて通貨の値を整形しますが、通貨間の換算は行いません。
* その内容はローカルで整形され、API に送信されることはありません。