Wie man Währungsinformationen in TanStack Start v1 anzeigt

Problem

Anwendungen müssen häufig Währungsinformationen anzeigen, ohne einen formatierten Preis darzustellen. Eine Währungsauswahl könnte verfügbare Währungen auflisten, ein Artikel über Wechselkurse könnte auf bestimmte Währungen durch Symbole verweisen, oder ein Finanz-Dashboard könnte Währungscodes anzeigen. Jede Darstellungsform hat jedoch ihre Einschränkungen. ISO-Codes wie "USD" sind präzise, aber für nicht-technische Nutzer kryptisch. Vollständige Namen wie "US Dollar" sind verständlich, erfordern aber Übersetzungen für internationale Zielgruppen. Symbole wie "$" sind vertraut, aber mehrdeutig—dasselbe Symbol repräsentiert US-, kanadische und australische Dollar. Die falsche Formatwahl für den jeweiligen Kontext reduziert die Klarheit und kann Benutzer verwirren.

Die Herausforderung wird durch Lokalisierung noch verstärkt. Ein Währungsname, der auf Englisch funktioniert, existiert möglicherweise in einer anderen Sprache nicht oder ist inkorrekt. Symbole, die in einer Region Standard sind, können in einer anderen unbekannt sein. Ohne einen konsistenten, lokalisierungsbewussten Ansatz codieren Anwendungen entweder Währungsdarstellungen in einer einzigen Sprache fest oder verwalten umfangreiche Übersetzungstabellen, die schnell veralten.

Lösung

Nutzen Sie die integrierten Internationalisierungs-APIs des Browsers, um Währungsinformationen in dem Format anzuzeigen, das sowohl dem Gebietsschema des Benutzers als auch dem Kontext entspricht. Die Intl.DisplayNames-API bietet lokalisierte vollständige Währungsnamen, während Intl.NumberFormat mit der Option currencyDisplay Währungssymbole oder -codes extrahieren kann. Durch die Auswahl der passenden API und Formatoption basierend auf dem Kontext stellen Sie sicher, dass Währungsreferenzen sowohl klar als auch korrekt lokalisiert sind, ohne Übersetzungsdaten verwalten zu müssen.

Erstellen Sie kleine, wiederverwendbare Komponenten oder Hilfsfunktionen, die einen Währungscode und ein Gebietsschema akzeptieren und dann die entsprechende Darstellung zurückgeben. Dieser Ansatz hält die Logik zur Währungsanzeige zentralisiert und macht es einfach, dieselbe Währung in verschiedenen Formaten in Ihrer Anwendung anzuzeigen.

Schritte

1. Erstellen Sie einen Helper für lokalisierte Währungsnamen

Die Intl.DisplayNames API mit type: "currency" gibt lokalisierte vollständige Währungsnamen für jeden ISO 4217 Währungscode zurück.

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

Dieser Helper akzeptiert einen dreistelligen ISO-Währungscode und gibt den vollständigen Namen in der Sprache des Benutzers zurück. Verwenden Sie dies für Währungsauswahlen oder erklärenden Text, bei denen Klarheit wichtiger ist als Kürze.

2. Erstellen Sie einen Helper zum Extrahieren von Währungssymbolen

Die Option currencyDisplay in Intl.NumberFormat steuert, wie Währungen erscheinen, mit Werten "code", "symbol", "narrowSymbol" und "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;
}

Dieser Helper formatiert einen Nullwert und extrahiert nur das Währungssymbol. Der Parameter narrow steuert, ob ein kompaktes Symbol wie "$" oder ein eindeutiges wie "US$" verwendet wird. Verwenden Sie Symbole in kompakten UI-Elementen wie Tabellen oder Diagrammen.

3. Erstellen Sie eine Komponente zur Anzeige von Währungsinformationen

Erstellen Sie eine flexible Komponente, die Währungsinformationen in jedem Format basierend auf einer display-Prop rendern kann.

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

Diese Komponente zentralisiert die Logik zur Währungsanzeige und erleichtert den Wechsel zwischen Formaten. Verwenden Sie "name" für Dropdown-Menüs und erklärenden Text, "symbol" oder "narrowSymbol" für kompakte Anzeigen und "code", wenn Präzision erforderlich ist.

4. Verwende die Komponente in einer TanStack Start-Route

Importiere und verwende die Komponente in einer beliebigen Routenkomponente und übergib dabei das Gebietsschema (Locale) des Benutzers aus deinem i18n-Kontext oder Route-Loader.

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

Die Komponente rendert dieselbe Währung in verschiedenen Formaten. In einer realen Anwendung solltest du das Gebietsschema aus deinem i18n-Provider oder Routenkontext abrufen, um sicherzustellen, dass alle Währungsanzeigen die Sprachpräferenz des Benutzers respektieren.