Comment afficher les informations de devise dans TanStack Start v1

Problème

Les applications ont souvent besoin d'afficher des informations sur les devises sans montrer un prix formaté. Un sélecteur de devise peut lister les devises disponibles, un article sur les taux de change peut faire référence à des devises spécifiques par symbole, ou un tableau de bord financier peut afficher des codes de devise. 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éricains, canadiens et australiens. Choisir le mauvais format pour le contexte réduit la clarté et peut confondre 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 méconnus dans une autre. Sans une approche cohérente et adaptée à la locale, 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 au navigateur pour afficher les informations de devise dans le format qui correspond à la fois à la locale de l'utilisateur et au contexte. L'API Intl.DisplayNames fournit des noms complets de devises localisés, tandis que Intl.NumberFormat avec l'option currencyDisplay peut extraire des symboles ou des codes de devise. En sélectionnant l'API appropriée et l'option de format basée sur le contexte, vous assurez que les références de devise sont à la fois claires et correctement localisées sans maintenir de données de traduction.

Créez des composants réutilisables ou des fonctions auxiliaires qui acceptent un code de devise et une locale, puis retournent 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 un helper pour obtenir les noms de devises localisés

L'API Intl.DisplayNames avec type: "currency" renvoie les noms complets localisés des devises pour n'importe quel 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;
}

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

2. Créer un helper pour extraire les symboles de devises

L'option currencyDisplay dans Intl.NumberFormat contrôle l'apparence 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;
}

Ce helper formate une valeur zéro et extrait uniquement le symbole de la devise. Le paramètre narrow détermine 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

Construisez un composant flexible qui peut afficher les informations de devise dans n'importe quel format basé sur 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 menus déroulants et les textes explicatifs, "symbol" ou "narrowSymbol" pour les affichages compacts, et "code" lorsque la précision est requise.

4. Utilisez le composant dans une route TanStack Start

Importez et utilisez le composant dans n'importe quel composant de route, en transmettant la locale de l'utilisateur depuis votre contexte i18n ou le 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 les préférences linguistiques de l'utilisateur.