Comment afficher les informations de devise dans React Router v7

Problème

Les applications ont souvent besoin d'afficher des informations de devise sans montrer de prix formaté. Un sélecteur de devise peut afficher « USD » ou « Dollar américain », tandis qu'un tableau de bord financier peut afficher uniquement le symbole « $ ». Chaque format répond à un objectif différent, mais tous partagent des défis communs. Le code ISO « USD » est précis mais peu familier pour les utilisateurs non techniques. Le nom complet « Dollar américain » est clair mais nécessite une traduction pour les audiences internationales. Le symbole « $ » est compact mais ambigu — il peut représenter des dollars américains, canadiens ou australiens selon le contexte. Choisir le mauvais format déroute les utilisateurs et compromet la confiance dans les interfaces financières.

Le défi est amplifié lors de la création d'applications multilingues. Un nom de devise qui fonctionne en anglais peut ne pas se traduire directement dans d'autres langues, et les conventions de symboles varient selon la locale. Coder ces valeurs en dur crée une charge de maintenance et limite la portée de votre application.

Solution

Utilisez la méthode formatDisplayName de react-intl pour afficher les noms et codes de devises localisés, et exploitez l'API Intl.NumberFormat du navigateur pour extraire les symboles de devises. La méthode formatDisplayName accepte un code de devise et retourne le nom localisé approprié en fonction de la locale de l'utilisateur, gérant automatiquement la traduction. Pour les symboles, formatez un nombre exemple avec la devise et extrayez la partie symbole du résultat.

Créez des fonctions d'aide ou des composants ciblés pour chaque format d'affichage — nom complet, symbole ou code — afin de pouvoir choisir la représentation appropriée pour chaque contexte. Cette approche maintient la logique d'affichage des devises centralisée et garantit la cohérence dans votre application tout en respectant les préférences de locale de l'utilisateur.

Étapes

1. Créer une fonction d'aide pour afficher les noms de devises localisés

Utilisez la méthode formatDisplayName avec type: 'currency' pour convertir les codes de devise ISO en noms complets localisés.

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

Lorsque la locale est "en" et le code est "CNY", cela affiche "Chinese Yuan". La méthode traduit automatiquement le nom en fonction de la locale actuelle du IntlProvider.

2. Créer une fonction d'aide pour extraire et afficher les symboles de devises

Utilisez Intl.NumberFormat avec formatToParts pour extraire le symbole de devise en filtrant les parties avec type === "currency".

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

L'option currencyDisplay contrôle la forme de la devise, "narrowSymbol" fournissant la représentation la plus compacte. Cette approche gère automatiquement le placement et le formatage des symboles spécifiques à la locale.

3. Créer un composant offrant plusieurs options d'affichage

Construisez un composant flexible qui accepte une prop de mode d'affichage pour basculer entre les formats code, symbole et nom.

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

Ce composant centralise la logique d'affichage des devises et facilite le changement de formats selon le contexte de l'interface. Utilisez display="name" pour les sélecteurs de devises où la clarté est importante, display="symbol" pour les affichages compacts comme les en-têtes de tableaux, et display="code" pour les rapports techniques ou financiers.

4. Utiliser le composant dans différents contextes

Appliquez le mode d'affichage approprié en fonction de l'endroit où les informations de devise apparaissent dans votre interface.

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

Chaque contexte utilise le format qui sert le mieux son objectif : noms complets pour les interfaces de sélection, symboles pour les affichages compacts, et codes pour les références techniques précises. Le composant gère automatiquement la localisation en fonction de la locale de l'utilisateur depuis le IntlProvider.