Comment afficher les informations de devise dans TanStack Start v1

Problème

Les applications doivent souvent afficher des informations de devise sans montrer de prix formaté. Un sélecteur de devises peut lister les devises disponibles, un article sur les taux de change peut référencer des devises spécifiques par leur symbole, ou un tableau de bord financier peut afficher des codes de devises. Cependant, chaque représentation a ses limites. Les codes ISO comme "USD" sont précis mais cryptiques pour les utilisateurs non techniques. Les noms complets comme "Dollar américain" sont clairs mais nécessitent une traduction pour les audiences internationales. Les symboles comme "$" sont familiers mais ambigus — le même symbole représente les dollars américain, canadien et australien. Choisir le mauvais format pour le contexte réduit la clarté et peut dérouter les utilisateurs.

Le défi est amplifié par la localisation. Un nom de devise qui fonctionne en anglais peut ne pas exister ou être incorrect dans une autre langue. Les symboles qui sont standard dans une région peuvent être inconnus dans une autre. Sans une approche cohérente et adaptée aux paramètres régionaux, les applications codent en dur les représentations de devises dans une seule langue ou maintiennent de grandes tables de traduction qui deviennent rapidement obsolètes.

Solution

Utilisez les API d'internationalisation intégrées du navigateur pour afficher les informations de devise dans le format qui correspond à la fois aux paramètres régionaux de l'utilisateur et au contexte. L'API Intl.DisplayNames fournit les noms complets de devises localisés, tandis que Intl.NumberFormat avec l'option currencyDisplay peut extraire les symboles ou codes de devises. En sélectionnant l'API et l'option de format appropriées en fonction du contexte, vous vous assurez que les références de devises sont à la fois claires et correctement localisées sans maintenir de données de traduction.

Créez de petits composants réutilisables ou des fonctions d'aide qui acceptent un code de devise et des paramètres régionaux, puis renvoient la représentation appropriée. Cette approche maintient la logique d'affichage des devises centralisée et facilite l'affichage de la même devise dans différents formats à travers votre application.

Étapes

1. Créer une fonction utilitaire pour obtenir les noms de devises localisés

L'API Intl.DisplayNames avec type: "currency" renvoie les noms complets de devises localisés pour tout code de devise ISO 4217.

export function getCurrencyName(currencyCode: string, locale: string): string {
  const displayNames = new Intl.DisplayNames([locale], { type: "currency" });
  return displayNames.of(currencyCode) || currencyCode;
}

Cette fonction utilitaire accepte un code de devise ISO à trois lettres et renvoie le nom complet dans la langue de l'utilisateur. Utilisez-la pour les sélecteurs de devises ou les textes explicatifs où la clarté est plus importante que la concision.

2. Créer une fonction utilitaire pour extraire les symboles de devises

L'option currencyDisplay dans Intl.NumberFormat contrôle l'affichage de la devise, avec les valeurs « code », « symbol », « narrowSymbol » et « name ».

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
  narrow: boolean = false,
): string {
  const formatter = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: narrow ? "narrowSymbol" : "symbol",
  });

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

Cette fonction utilitaire formate une valeur zéro et extrait uniquement le symbole de la devise. Le paramètre narrow contrôle s'il faut utiliser un symbole compact comme « $ » ou un symbole désambiguïsé comme « $ US ». Utilisez les symboles dans les éléments d'interface compacts comme les tableaux ou les graphiques.

3. Créer un composant pour afficher les informations de devise

Créez un composant flexible qui peut afficher les informations de devise dans n'importe quel format en fonction d'une prop display.

interface CurrencyDisplayProps {
  code: string;
  locale: string;
  display: "name" | "symbol" | "narrowSymbol" | "code";
}

export function CurrencyDisplay({
  code,
  locale,
  display,
}: CurrencyDisplayProps) {
  let content: string;

  if (display === "name") {
    content = getCurrencyName(code, locale);
  } else if (display === "code") {
    content = code.toUpperCase();
  } else {
    content = getCurrencySymbol(code, locale, display === "narrowSymbol");
  }

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

Ce composant centralise la logique d'affichage des devises et facilite le changement de formats. Utilisez "name" pour les listes déroulantes et les textes explicatifs, "symbol" ou "narrowSymbol" pour les affichages compacts, et "code" lorsque la précision est requise.

4. Utiliser le composant dans une route TanStack Start

Importez et utilisez le composant dans n'importe quel composant de route, en passant la locale de l'utilisateur depuis votre contexte i18n ou votre chargeur de route.

import { createFileRoute } from "@tanstack/react-router";
import { CurrencyDisplay } from "~/components/CurrencyDisplay";

export const Route = createFileRoute("/currencies")({
  component: CurrenciesPage,
});

function CurrenciesPage() {
  const locale = "en-US";

  return (
    <div>
      <h1>Currency Information</h1>
      <p>
        Full name: <CurrencyDisplay code="USD" locale={locale} display="name" />
      </p>
      <p>
        Symbol: <CurrencyDisplay code="USD" locale={locale} display="symbol" />
      </p>
      <p>
        Code: <CurrencyDisplay code="USD" locale={locale} display="code" />
      </p>
    </div>
  );
}

Le composant affiche la même devise dans différents formats. Dans une application réelle, récupérez la locale depuis votre fournisseur i18n ou le contexte de route pour garantir que tous les affichages de devises respectent la préférence linguistique de l'utilisateur.