Wie man Währungsinformationen in React Router v7 anzeigt

Problem

Anwendungen müssen häufig Währungsinformationen anzeigen, ohne einen formatierten Preis darzustellen. Ein Währungsauswahlelement könnte "USD" oder "US-Dollar" anzeigen, während ein Finanz-Dashboard möglicherweise nur das "$"-Symbol darstellt. Jedes Format dient einem anderen Zweck, aber sie 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 jedoch Übersetzung für internationale Zielgruppen. Das Symbol "$" ist kompakt, aber mehrdeutig—es könnte je nach Kontext US-, kanadische oder australische Dollar repräsentieren. Die Wahl des falschen Formats verwirrt Benutzer und untergräbt das Vertrauen in Finanzschnittstellen.

Die Herausforderung wird noch verstärkt, wenn mehrsprachige Anwendungen entwickelt werden. 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 Hardcoding 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 Anwendung unter Berücksichtigung der Gebietsschema-Präferenzen des Benutzers.

Schritte

1. Erstellen Sie einen Helfer zur Anzeige lokalisierter Währungsnamen

Verwende die formatDisplayName-Methode mit type: 'currency', um ISO-Währungscodes in lokalisierte vollständige Namen umzuwandeln.

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 Locale "en" ist und der Code "CNY", wird "Chinese Yuan" angezeigt. Die Methode übersetzt den Namen automatisch basierend auf dem aktuellen Locale aus dem IntlProvider.

2. Erstelle einen Helper zur Extraktion und Anzeige von Währungssymbolen

Verwende Intl.NumberFormat mit formatToParts, um das Währungssymbol zu extrahieren, indem nach Teilen mit type === "currency" gefiltert wird.

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 automatisch die lokale Symbolplatzierung und Formatierung.

3. Erstelle eine Komponente, die mehrere Anzeigeoptionen bietet

Baue eine flexible Komponente, die eine Display-Mode-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 den Wechsel zwischen Formaten basierend auf dem UI-Kontext. Verwende 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 finanzielle Berichte.

4. Verwenden Sie die Komponente in verschiedenen Kontexten

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

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

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

      <p>
        Transaktionswährung: <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 übernimmt die Lokalisierung automatisch basierend auf der Gebietsschema des Benutzers vom IntlProvider.