Overview

The <Currency> component renders a numerical value as a 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.

<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 localized currency values.

import { Currency } from 'gt-next';

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

Specifying currency

Here we are 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

Say that you want the currency to be displayed in a sentence that is 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">
      The price is <Currency> {item.price} </Currency>.
    </T> 
  );
}

Custom formatting

Here we are displaying the price in GBP that specifies exactly decimal places and uses the narrow symbol for the currency (i.e., "$100" rather than "US$100"). Read more about the Intl.NumberFormatOptions for more 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 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 library.

Next Steps

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