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 comme un prix, gérant automatiquement le placement des symboles, les séparateurs décimaux et le regroupement 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 client.

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; // ex., "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' : Ceci indique au composant de formater le nombre comme une devise, et non comme un décimal standard.
• currency : Le code de devise ISO à trois lettres (ex., '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 des 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>
        Prix (USD) : <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Prix (EUR) : <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

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