Overview

The <Currency> component renders a numeric value as a currency. The number is formatted according to the current locale and any optional parameters provided. The currency component handles formatting only and does not perform any exchange rate calculations.

<Currency>{100}</Currency>
// Output: £100.00

All reformatting is handled locally using the Intl.NumberFormat library.

Reference

Props

Description

Returns

JSX.Element containing the formatted currency as a string.

Examples

Basic example

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

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency> {item.price} </Currency>
  );
}

Specifying currency

Here we’re displaying the price in euros.

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

Translating <Currency> components

Suppose you want the currency to appear within a sentence that’s also translated. You can wrap the <Currency> component in a <T> component.

import { T, Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      Price: <Currency>{item.price}</Currency>
    </T> 
  );
}

Custom formatting

Here, we’re displaying the price in GBP with a fixed number of decimal places and using the narrow currency symbol (i.e. "$100" rather than "US$100"). Read more about Intl.NumberFormatOptions for additional options.

import { Currency } from 'gt-next';

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

Notes

• The <Currency> component is used to format currency values based on the current locale and any optional parameters provided.
• 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 library.

Next steps

• For more details and usage examples of the <Currency> component and other variable components such as <Num>, <DateTime>, and <Var>,