Wie man Währungsinformationen in React Router v7 anzeigt

Problem

Anwendungen müssen häufig Währungsinformationen anzeigen, ohne einen formatierten Preis anzuzeigen. Ein Währungsselektor könnte "USD" oder "US-Dollar" anzeigen, während ein Finanz-Dashboard nur das "$"-Symbol anzeigt. Jedes Format dient einem anderen Zweck, aber alle teilen gemeinsame Herausforderungen. Der ISO-Code "USD" ist präzise, aber für nicht-technische Benutzer ungewohnt. Der vollständige Name "US-Dollar" ist klar, erfordert aber eine Übersetzung für internationale Zielgruppen. Das Symbol "$" ist kompakt, aber mehrdeutig – es könnte je nach Kontext US-, kanadische oder australische Dollar darstellen. Die Wahl des falschen Formats verwirrt Benutzer und untergräbt das Vertrauen in Finanzschnittstellen.

Die Herausforderung wird beim Erstellen mehrsprachiger Anwendungen noch größer. Ein Währungsname, der auf Englisch funktioniert, lässt sich möglicherweise nicht direkt in andere Sprachen übersetzen, und Symbolkonventionen variieren je nach Gebietsschema. Das Hartcodieren dieser Werte erzeugt Wartungsaufwand und begrenzt die Reichweite Ihrer Anwendung.

Lösung

Verwenden Sie die formatDisplayName-Methode von react-intl, um lokalisierte Währungsnamen und -codes anzuzeigen, und nutzen Sie die Intl.NumberFormat-API des Browsers, um Währungssymbole zu extrahieren. Die formatDisplayName-Methode akzeptiert einen Währungscode und gibt den entsprechenden lokalisierten Namen basierend auf dem Gebietsschema des Benutzers zurück, wobei die Übersetzung automatisch erfolgt. Für Symbole formatieren Sie eine Beispielzahl mit der Währung und extrahieren den Symbolteil aus dem Ergebnis.

Erstellen Sie fokussierte Hilfsfunktionen oder Komponenten für jedes Anzeigeformat – vollständiger Name, Symbol oder Code –, damit Sie die richtige Darstellung für jeden Kontext wählen können. Dieser Ansatz hält die Logik zur Währungsanzeige zentralisiert und gewährleistet Konsistenz in Ihrer gesamten Anwendung, während die Gebietsschema-Präferenzen der Benutzer respektiert werden.

Schritte

1. Erstellen Sie eine Hilfsfunktion zur Anzeige lokalisierter Währungsnamen

Verwenden Sie die Methode formatDisplayName mit type: 'currency', um ISO-Währungscodes in lokalisierte vollständige Namen zu konvertieren.

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

Wenn das Gebietsschema "en" und der Code "CNY" ist, wird "Chinese Yuan" angezeigt. Die Methode übersetzt den Namen automatisch basierend auf dem aktuellen Gebietsschema aus dem IntlProvider.

2. Erstellen Sie eine Hilfsfunktion zum Extrahieren und Anzeigen von Währungssymbolen

Verwenden Sie Intl.NumberFormat mit formatToParts, um das Währungssymbol zu extrahieren, indem Sie nach Teilen mit type === "currency" filtern.

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

Die Option currencyDisplay steuert die Form der Währung, wobei "narrowSymbol" die kompakteste Darstellung bietet. Dieser Ansatz behandelt gebietsschemaspezifische Symbolplatzierung und Formatierung automatisch.

3. Erstellen Sie eine Komponente, die mehrere Anzeigeoptionen bietet

Erstellen Sie eine flexible Komponente, die eine Anzeigemodus-Prop akzeptiert, um zwischen Code-, Symbol- und Namensformaten zu wechseln.

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

Diese Komponente zentralisiert die Logik zur Währungsanzeige und erleichtert das Wechseln von Formaten basierend auf dem UI-Kontext. Verwenden Sie display="name" für Währungsauswahlen, bei denen Klarheit wichtig ist, display="symbol" für kompakte Anzeigen wie Tabellenüberschriften und display="code" für technische oder Finanzberichte.

4. Verwenden Sie die Komponente in verschiedenen Kontexten

Wenden Sie den entsprechenden Anzeigemodus basierend darauf an, wo die Währungsinformationen in Ihrer Benutzeroberfläche erscheinen.

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

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

      <p>
        Transaction currency: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

Jeder Kontext verwendet das Format, das seinem Zweck am besten dient: vollständige Namen für Auswahlschnittstellen, Symbole für kompakte Anzeigen und Codes für präzise technische Referenzen. Die Komponente behandelt die Lokalisierung automatisch basierend auf dem Gebietsschema des Benutzers aus dem IntlProvider.