Currency formatting per locale

Problem

You need to render prices in a user-facing dashboard. Hardcoding $1,234.56 breaks for customers in Germany, Japan, or Brazil.

Solution

Use the built-in Intl.NumberFormat API. It handles grouping separators, decimal characters, and currency symbol placement automatically.

const fmt = new Intl.NumberFormat(locale, {
  style: "currency",
  currency: "USD",
});

fmt.format(1234.56);
// "en-US" → $1,234.56
// "de-DE" → 1.234,56 $
// "ja-JP" → $1,234.56
// "pt-BR" → US$ 1.234,56

Usage in React

function Price({ amount, locale }) {
  const formatted = new Intl.NumberFormat(
    locale,
    { style: "currency", currency: "USD" }
  ).format(amount);

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