Mostrar nombres y símbolos de monedas

Problema

Una aplicación necesita hacer referencia a una moneda, como 'USD'. Simplemente mostrar este código es críptico. Mostrar el nombre completo 'US Dollar' es mejor, pero este nombre en sí mismo necesita ser traducido ('dólar estadounidense', 'Dollar américain'). Además, el símbolo correcto ($, US$, CA$) puede ser ambiguo sin contexto.

Solución

Usa el componente FormattedNumber de react-intl con la opción currencyDisplay. Esto te permite mostrar una moneda como su símbolo (por defecto), su nombre completo localizado o su código ISO, todo correctamente formateado para la configuración regional actual.

Pasos

1. Crear un componente cliente para mostrar monedas

El componente FormattedNumber debe usarse dentro de un componente cliente. Crea un archivo app/components/LocalizedCurrency.tsx que tome la opción currencyDisplay como prop para hacerlo reutilizable.

// 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}
    />
  );
}

Este componente ahora acepta un prop displayAs que controla directamente la opción currencyDisplay.

2. Usar el componente en una página

Ahora puedes usar este componente en una página para mostrar los diferentes formatos de moneda cambiando el prop displayAs.

// 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>
  );
}

Al visitar /en, verás "1,250.75 US dollars" para la opción 'name'. Al visitar /es, la misma línea se mostrará como "1.250,75 dólares estadounidenses", mostrando que el nombre de la moneda en sí ha sido traducido y formateado correctamente.