Cómo mostrar información de moneda en React Router v7

Problema

Las aplicaciones a menudo necesitan mostrar información de divisas sin mostrar un precio formateado. Un selector de moneda podría mostrar "USD" o "Dólar estadounidense", mientras que un panel financiero podría mostrar solo el símbolo "$". Cada formato sirve para un propósito diferente, pero todos comparten desafíos comunes. El código ISO "USD" es preciso pero poco familiar para usuarios no técnicos. El nombre completo "Dólar estadounidense" es claro pero requiere traducción para audiencias internacionales. El símbolo "$" es compacto pero ambiguo—podría representar dólares estadounidenses, canadienses o australianos dependiendo del contexto. Elegir el formato incorrecto confunde a los usuarios y socava la confianza en las interfaces financieras.

El desafío se complica al construir aplicaciones multilingües. Un nombre de moneda que funciona en inglés puede no traducirse directamente a otros idiomas, y las convenciones de símbolos varían según la configuración regional. Codificar estos valores de forma rígida crea una carga de mantenimiento y limita el alcance de tu aplicación.

Solución

Utiliza el método formatDisplayName de react-intl para mostrar nombres y códigos de monedas localizados, y aprovecha la API Intl.NumberFormat del navegador para extraer símbolos de moneda. El método formatDisplayName acepta un código de moneda y devuelve el nombre localizado apropiado basado en la configuración regional del usuario, manejando la traducción automáticamente. Para los símbolos, formatea un número de ejemplo con la moneda y extrae la parte del símbolo del resultado.

Crea funciones o componentes auxiliares específicos para cada formato de visualización—nombre completo, símbolo o código—para que puedas elegir la representación correcta para cada contexto. Este enfoque mantiene la lógica de visualización de monedas centralizada y asegura la consistencia en toda tu aplicación mientras respeta las preferencias de configuración regional del usuario.

Pasos

1. Crear un auxiliar para mostrar nombres de monedas localizados

Utiliza el método formatDisplayName con type: 'currency' para convertir códigos ISO de moneda en nombres completos localizados.

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

Cuando el locale es "en" y el código es "CNY", esto muestra "Chinese Yuan". El método traduce automáticamente el nombre según el locale actual del IntlProvider.

2. Crear un helper para extraer y mostrar símbolos de moneda

Utiliza Intl.NumberFormat con formatToParts para extraer el símbolo de moneda filtrando las partes con 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>;
}

La opción currencyDisplay controla la forma de la moneda, con "narrowSymbol" proporcionando la representación más compacta. Este enfoque maneja automáticamente la colocación y el formato del símbolo según el locale.

3. Crear un componente que ofrezca múltiples opciones de visualización

Construye un componente flexible que acepte una prop de modo de visualización para cambiar entre formatos de código, símbolo y nombre.

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

Este componente centraliza la lógica de visualización de monedas y facilita el cambio de formatos según el contexto de la interfaz. Usa display="name" para selectores de moneda donde la claridad es importante, display="symbol" para visualizaciones compactas como encabezados de tabla, y display="code" para informes técnicos o financieros.

4. Usa el componente en diferentes contextos

Aplica el modo de visualización apropiado según dónde aparezca la información de moneda en tu interfaz.

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

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

      <p>
        Moneda de la transacción: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

Cada contexto utiliza el formato que mejor sirve a su propósito: nombres completos para interfaces de selección, símbolos para visualizaciones compactas y códigos para referencias técnicas precisas. El componente maneja la localización automáticamente basándose en la configuración regional del usuario desde IntlProvider.