# gt-next: General Translation Next.js SDK: Currency
URL: https://generaltranslation.com/en-GB/docs/next/api/components/currency.mdx
---
title: Currency
description: API reference for the Currency component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<Currency>` component renders a numerical value as currency.
The number is formatted based on the current locale and any optional parameters passed.
The currency component only handles formatting and does not perform any exchange rate calculations.

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

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


## Reference

### Props

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Optional value. children will be used for value if not provided.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop       | Description                                                                                                                                                                                                                                                                           |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | The content to render inside the component. Typically a number representing the value to be formatted as currency. If provided, it takes precedence over the `value` prop.                                                                                                            |
| `name`     | Optional name for the currency field, used for metadata purposes.                                                                                                                                                                                                                     |
| `value`    | The default value for the currency. Will fall back to `children` if not provided. Can be a string or number. Strings will be parsed into numbers before formatting.                                                                                                                   |
| `currency` | The currency type, such as &quot;USD&quot; or &quot;EUR&quot;. This determines the symbol and formatting used for the currency.                                                                                                                                                       |
| `options`  | Optional formatting options for the currency, following the [`Intl.NumberFormatOptions` specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Use this to define styles such as maximum fraction digits, grouping, etc. |
| `locales`  | Optional locales for specifying the formatting locale. If not provided, the user&#39;s default locale is used. Read more about specifying locales [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                     |

### Returns

`JSX.Element` containing the formatted currency as a string.

***

## Examples

### Basic example

The `<Currency>` component can be used to display localised currency values.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-next'; // [!code highlight]

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


### Specifying currency

Here we are displaying the price in euros.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-next';

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


### Translating Currency components

If you want the currency to be displayed in a sentence that is also translated, you can wrap the `<Currency>` component in a `<T>` component.

```jsx title="PriceDisplay.jsx" copy
import { T, Currency } from 'gt-next';

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


### Custom formatting

Here, we display the price in GBP, specifying the exact number of decimal places and using the narrow currency symbol (i.e. &quot;$100&quot; rather than &quot;US$100&quot;).
Read more about [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more options.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-next';

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

***


## Notes

* The `<Currency>` component is used to format currency values based on the current locale and any optional parameters passed.
* The currency component only handles formatting and does not perform any exchange-rate calculations.
* The contents of the `<Currency>` component will not be sent to the API for translation.
  All reformatting is done locally using the [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) library.

## Next steps

* For more details and usage examples of the `<Currency>` component and other variable components such as `<Num>`, `<DateTime>`, and `<Var>`, see the [Using Variable Components](/docs/next/guides/variables) documentation.