Affichage des noms et symboles de devises

Problème

Une application doit faire référence à une devise, comme 'USD'. Afficher simplement ce code est cryptique. Afficher le nom complet 'US Dollar' est préférable, mais ce nom lui-même doit être traduit ('dólar estadounidense', 'Dollar américain'). De plus, le symbole correct ($, US$, CA$) peut être ambigu sans contexte.

Solution

Utilisez le composant FormattedNumber de react-intl avec l'option currencyDisplay. Cela vous permet d'afficher une devise sous forme de symbole (par défaut), de son nom localisé complet, ou de son code ISO, tout en étant correctement formaté pour la locale actuelle.

Étapes

1. Créer un composant client pour l'affichage de devise

Le composant FormattedNumber doit être utilisé à l'intérieur d'un composant client. Créez un fichier app/components/LocalizedCurrency.tsx qui prend l'option currencyDisplay comme prop pour le rendre réutilisable.

// app/components/LocalizedCurrency.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

Ce composant accepte maintenant une prop displayAs qui contrôle directement l'option currencyDisplay.

2. Utiliser le composant sur une page

Vous pouvez maintenant utiliser ce composant sur une page pour afficher les différents formats de devise en modifiant la prop displayAs.

// app/[lang]/page.tsx
import LocalizedCurrency from '@/app/components/LocalizedCurrency';

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>Options d'affichage de devise</h1>
      <p>
        Par défaut (symbole) :
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Nom complet (name) :
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        Code ISO (code) :
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

Lorsque vous visitez /en, vous verrez "1,250.75 US dollars" pour l'option 'name'. Lorsque vous visitez /es, la même ligne affichera "1.250,75 dólares estadounidenses", montrant que le nom de la devise lui-même a été traduit et formaté correctement.