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 mieux, 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 nom complet localisé ou de code ISO, le tout correctement formaté pour la locale actuelle.

Étapes

1. Créer un composant client pour l'affichage des devises

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>Currency Display Options</h1>
      <p>
        Default (symbol):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Full name (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO code (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

Lors de la visite de /en, vous verrez « 1 250,75 dollars américains » pour l'option 'name'. Lors de la visite de /es, la même ligne s'affichera comme « 1 250,75 dólares estadounidenses », montrant que le nom de la devise lui-même a été traduit et formaté correctement.