Displaying currency names and symbols

Problem

An application needs to refer to a currency, such as 'USD'. Simply showing this code is cryptic. Showing the full name 'US Dollar' is better, but this name itself needs to be translated ('dólar estadounidense', 'Dollar américain'). Furthermore, the correct symbol ($, US$, CA$) can be ambiguous without context.

Solution

Use the FormattedNumber component from react-intl with the currencyDisplay option. This allows you to display a currency as its symbol (the default), its full localized name, or its ISO code, all while being correctly formatted for the current locale.

Steps

1. Create a client component for currency display

The FormattedNumber component must be used inside a client component. Create a file app/components/LocalizedCurrency.tsx that takes the currencyDisplay option as a prop to make it reusable.

// app/components/LocalizedCurrency.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

This component now accepts a displayAs prop that directly controls the currencyDisplay option.

2. Use the component on a page

You can now use this component on a page to show the different currency formats by changing the displayAs prop.

// app/[lang]/page.tsx
import LocalizedCurrency from '@/app/components/LocalizedCurrency';

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>Currency Display Options</h1>
      <p>
        Default (symbol):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Full name (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO code (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

When visiting /en, you will see "1,250.75 US dollars" for the 'name' option. When visiting /es, the same line will render as "1.250,75 dólares estadounidenses", showing that the currency name itself has been translated and formatted correctly.