Comment afficher les informations de devise dans React Router v7

Problème

Les applications doivent souvent afficher des informations de devise sans montrer un prix formaté. Un sélecteur de devise peut afficher "USD" ou "Dollar américain", tandis qu'un tableau de bord financier pourrait n'afficher que le symbole "$". Chaque format sert un objectif différent, mais ils partagent tous des défis communs. Le code ISO "USD" est précis mais peu familier aux 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 pourrait représenter le dollar américain, canadien ou australien selon le contexte. Choisir le mauvais format confond les utilisateurs et mine 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 les locales. Coder en dur ces valeurs 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 des noms et codes de devises localisés, et exploitez l'API Intl.NumberFormat du navigateur pour extraire les symboles de devise. La méthode formatDisplayName accepte un code de devise et renvoie le nom localisé approprié basé sur la locale de l'utilisateur, gérant la traduction automatiquement. Pour les symboles, formatez un nombre exemple avec la devise et extrayez la partie symbole du résultat.

Créez des fonctions ou composants d'aide 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 assure la cohérence dans votre application tout en respectant les préférences de locale des utilisateurs.

Étapes

1. Créer un assistant 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 que le code est "CNY", cela affiche "Chinese Yuan". La méthode traduit automatiquement le nom en fonction de la locale actuelle fournie par l'IntlProvider.

2. Créer un utilitaire pour extraire et afficher les symboles de devise

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, avec "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 qui offre plusieurs options d'affichage

Construisez un composant flexible qui accepte une prop de mode d'affichage pour basculer entre les formats de 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 en fonction du contexte de l'interface utilisateur. Utilisez display="name" pour les sélecteurs de devise où la clarté est importante, display="symbol" pour les affichages compacts comme les en-têtes de tableau, 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">
        Sélectionner la devise: <CurrencyInfo code="EUR" display="name" />
      </label>

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

      <p>
        Devise de transaction: <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 l'IntlProvider.