Formatage des prix

Problème

L'affichage d'un prix implique à la fois un nombre et une devise. Un prix américain est $1,200.50, tandis que la même valeur en euros pourrait être 1 200,50 € en Allemagne. La position du symbole monétaire, le séparateur décimal et le séparateur de groupement changent tous, et coder en dur ces règles pour chaque langue est ingérable.

Solution

Utilisez le composant FormattedNumber de react-intl avec l'option style: 'currency'. Ce composant lit la locale actuelle depuis son fournisseur et formate un nombre en tant que prix, en gérant automatiquement le placement du symbole, les séparateurs décimaux et le groupement pour cette locale et la devise spécifiée.

Étapes

1. Créer un composant client pour les prix

Les composants de formatage de react-intl doivent être utilisés dans des composants clients.

Créez un nouveau composant, app/components/ProductPrice.tsx.

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

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // e.g., "USD", "EUR", "JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. Passer les options de formatage

Le composant FormattedNumber est contrôlé par ces props :

• value : la valeur numérique du prix.
• style: 'currency' : cela indique au composant de formater le nombre en tant que devise, et non en tant que décimal standard.
• currency : le code devise ISO à trois lettres (par exemple, 'USD', 'EUR'). Ceci est requis lors de l'utilisation de style: 'currency'.

3. Utiliser le composant sur une page

Vous pouvez maintenant utiliser ce composant dans vos composants serveur ou client pour afficher les prix.

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

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>Product</h1>
      <p>
        Price (USD): <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Price (EUR): <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

Un utilisateur visitant /en verra "Price (USD) : $1,299.99" et "Price (EUR) : €1,199.50". Un utilisateur visitant /es verra "Price (USD) : 1299,99 US$" et "Price (EUR) : 1199,50 €".