How to display currency information in React Router v7

Problem

Applications often need to display currency information without showing a formatted price. A currency selector might show "USD" or "US Dollar," while a financial dashboard might display just the "$" symbol. Each format serves a different purpose, but they all share common challenges. The ISO code "USD" is precise but unfamiliar to non-technical users. The full name "US Dollar" is clear but requires translation for international audiences. The symbol "$" is compact but ambiguous—it could represent US, Canadian, or Australian dollars depending on context. Choosing the wrong format confuses users and undermines trust in financial interfaces.

The challenge is compounded when building multilingual applications. A currency name that works in English may not translate directly to other languages, and symbol conventions vary by locale. Hard-coding these values creates maintenance burden and limits your application's reach.

Solution

Use react-intl's formatDisplayName method to display localized currency names and codes, and leverage the browser's Intl.NumberFormat API to extract currency symbols. The formatDisplayName method accepts a currency code and returns the appropriate localized name based on the user's locale, handling translation automatically. For symbols, format a sample number with the currency and extract the symbol part from the result.

Create focused helper functions or components for each display format—full name, symbol, or code—so you can choose the right representation for each context. This approach keeps currency display logic centralized and ensures consistency across your application while respecting user locale preferences.

Steps

1. Create a helper to display localized currency names

Use the formatDisplayName method with type: 'currency' to convert ISO currency codes into localized full names.

import { useIntl } from "react-intl";

export function CurrencyName({ code }: { code: string }) {
  const intl = useIntl();
  const name = intl.formatDisplayName(code, { type: "currency" });
  return <span>{name}</span>;
}

When the locale is "en" and the code is "CNY", this displays "Chinese Yuan". The method automatically translates the name based on the current locale from the IntlProvider.

2. Create a helper to extract and display currency symbols

Use Intl.NumberFormat with formatToParts to extract the currency symbol by filtering for parts with type === "currency".

function getCurrencySymbol(locale: string, currency: string): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart?.value || currency;
}

export function CurrencySymbol({ code }: { code: string }) {
  const intl = useIntl();
  const symbol = getCurrencySymbol(intl.locale, code);
  return <span>{symbol}</span>;
}

The currencyDisplay option controls the form of the currency, with "narrowSymbol" providing the most compact representation. This approach handles locale-specific symbol placement and formatting automatically.

3. Create a component that offers multiple display options

Build a flexible component that accepts a display mode prop to switch between code, symbol, and name formats.

import { useIntl } from "react-intl";

type CurrencyDisplayMode = "code" | "symbol" | "name";

interface CurrencyInfoProps {
  code: string;
  display?: CurrencyDisplayMode;
}

export function CurrencyInfo({ code, display = "symbol" }: CurrencyInfoProps) {
  const intl = useIntl();

  if (display === "name") {
    const name = intl.formatDisplayName(code, { type: "currency" });
    return <span>{name}</span>;
  }

  if (display === "symbol") {
    const parts = new Intl.NumberFormat(intl.locale, {
      style: "currency",
      currency: code,
      currencyDisplay: "narrowSymbol",
    }).formatToParts(0);
    const symbol =
      parts.find((part) => part.type === "currency")?.value || code;
    return <span>{symbol}</span>;
  }

  return <span>{code}</span>;
}

This component centralizes currency display logic and makes it easy to switch formats based on UI context. Use display="name" for currency selectors where clarity is important, display="symbol" for compact displays like table headers, and display="code" for technical or financial reports.

4. Use the component in different contexts

Apply the appropriate display mode based on where the currency information appears in your interface.

export default function CurrencyExample() {
  return (
    <div>
      <label htmlFor="currency-select">
        Select currency: <CurrencyInfo code="EUR" display="name" />
      </label>

      <table>
        <thead>
          <tr>
            <th>
              Amount (<CurrencyInfo code="USD" display="symbol" />)
            </th>
          </tr>
        </thead>
      </table>

      <p>
        Transaction currency: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

Each context uses the format that best serves its purpose: full names for selection interfaces, symbols for compact displays, and codes for precise technical references. The component handles localization automatically based on the user's locale from the IntlProvider.