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

title: Currency
description: Format a currency amount for the active locale with General Translation gt-react. API reference for Currency.

---

The `<Currency>` component renders a numeric value formatted as a currency for the active locale. It only formats — it does not perform exchange-rate conversion.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework&#39;s package instead.*

## Overview [#overview]

Pass an amount as children and set the `currency` code.

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

All formatting is handled locally with [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## How it works [#how-it-works]

* **Local formatting.** The amount is formatted in the browser using `Intl.NumberFormat`. Its value is never sent to the General Translation API.
* **No conversion.** `<Currency>` formats the symbol, grouping, and decimals for the chosen currency and locale, but does not convert between currencies.
* **Locale resolution.** The active locale determines formatting unless overridden with `locales`.

## Props [#props]

| Prop                    | Description                     | Type                       | Optional | Default       |
| ----------------------- | ------------------------------- | -------------------------- | -------- | ------------- |
| [`children`](#children) | The amount to format.           | `number \| string`         | No       | —             |
| [`currency`](#currency) | ISO 4217 currency code.         | `string`                   | Yes      | `USD`         |
| [`options`](#options)   | `Intl.NumberFormat` options.    | `Intl.NumberFormatOptions` | Yes      | `{}`          |
| [`locales`](#locales)   | Locale override for formatting. | `string[]`                 | Yes      | Active locale |
| [`name`](#name)         | Variable name for the entry.    | `string`                   | Yes      | —             |

### `children` [#children]

**Type** `number | string` · **Required**

The amount to format as currency. Strings are parsed into numbers before formatting.

### `currency` [#currency]

**Type** `string` · **Optional** · **Default** `USD`

The ISO 4217 currency code, such as `USD` or `EUR`. It determines the symbol and formatting.

### `options` [#options]

**Type** `Intl.NumberFormatOptions` · **Optional** · **Default** `{}`

Formatting options that follow the [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) specification, such as `currencyDisplay` and fraction-digit limits.

### `locales` [#locales]

**Type** `string[]` · **Optional** · **Default** Active locale

Locales to format for. When omitted, the active locale is used. See the [locales argument](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Type** `string` · **Optional**

An optional name for the currency field, used for metadata.

## Examples [#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 [#notes]

* `<Currency>` formats currency values for the active locale; it does not convert between currencies.
* Its contents are formatted locally and never sent to the API.