Mostrando nombres y símbolos de monedas

Problema

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

Solución

Utiliza el componente FormattedNumber de react-intl con la opción currencyDisplay. Esto te permite mostrar una moneda como su símbolo (el predeterminado), su nombre completo localizado, o su código ISO, todo mientras se formatea correctamente para el idioma actual.

Pasos

1. Crear un componente cliente para mostrar la moneda

El componente FormattedNumber debe utilizarse 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>Opciones de visualización de moneda</h1>
      <p>
        Predeterminado (símbolo):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Nombre completo (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        Código ISO (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

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