Comment formater les montants monétaires dans TanStack Start v1

Problème

Les prix combinent deux défis de localisation : la représentation de la devise et le formatage des nombres. La même valeur monétaire apparaît comme $1,200.50 aux États-Unis et 1 200,50 € en Allemagne. Le symbole monétaire se déplace, les séparateurs décimaux et de groupement s'inversent, et même l'espacement change.

Ces conventions ne sont pas des préférences mais des attentes. Afficher les prix dans un format inhabituel amène les utilisateurs à se demander s'ils voient le montant correct. Un prix affiché comme "1200.50 EUR" pour un utilisateur allemand ou "1.200,50$" pour un utilisateur américain crée des frictions et érode la confiance.

Solution

Formatez les valeurs monétaires en fonction à la fois de la devise et des paramètres régionaux de l'utilisateur. Cela combine le placement du symbole monétaire avec les règles de formatage des nombres spécifiques aux paramètres régionaux, créant des prix qui correspondent aux attentes régionales sur l'apparence de l'argent.

Utilisez la méthode formatNumber de react-intl avec l'option style: 'currency' pour appliquer à la fois le code de devise et les conventions de formatage des paramètres régionaux de l'utilisateur. L'API Intl.NumberFormat du navigateur gère automatiquement le placement des symboles, le choix des séparateurs et l'espacement.

Étapes

1. Créer un composant de formatage de devise

Créez un composant réutilisable qui accepte une valeur numérique et un code de devise, puis formate le prix en utilisant les paramètres régionaux de l'utilisateur.

import { useIntl } from "react-intl";

interface PriceProps {
  value: number;
  currency: string;
}

export function Price({ value, currency }: PriceProps) {
  const intl = useIntl();

  const formattedPrice = intl.formatNumber(value, {
    style: "currency",
    currency: currency,
  });

  return <span>{formattedPrice}</span>;
}

Le hook useIntl fournit l'accès à l'API de formatage. La méthode formatNumber avec style: 'currency' applique à la fois le symbole monétaire et le formatage des nombres spécifique aux paramètres régionaux.

2. Utiliser le composant avec différentes devises

Affichez les prix dans toute votre application en passant le montant numérique et le code de devise.

export default function ProductCard() {
  return (
    <div>
      <h2>Premium Plan</h2>
      <Price value={1200.5} currency="USD" />
    </div>
  );
}

Le composant formate automatiquement le prix selon les paramètres régionaux de l'utilisateur. Un utilisateur américain voit "$1,200.50" tandis qu'un utilisateur allemand voit "1.200,50 $".

3. Formater les prix avec une précision décimale personnalisée

Contrôlez le nombre de décimales affichées en ajoutant les options minimumFractionDigits et maximumFractionDigits.

export function PriceWithPrecision({ value, currency }: PriceProps) {
  const intl = useIntl();

  const formattedPrice = intl.formatNumber(value, {
    style: "currency",
    currency: currency,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  return <span>{formattedPrice}</span>;
}

Cela garantit un affichage décimal cohérent pour tous les prix, même lorsque la valeur est un nombre entier comme 100.

4. Créer une fonction auxiliaire pour le formatage en ligne

Pour les cas où un composant wrapper n'est pas nécessaire, créez une fonction auxiliaire de formatage.

import { useIntl } from "react-intl";

export function useFormatCurrency() {
  const intl = useIntl();

  return (value: number, currency: string) => {
    return intl.formatNumber(value, {
      style: "currency",
      currency: currency,
    });
  };
}

Utilisez ce hook lorsque vous avez besoin de prix formatés dans des attributs, des valeurs calculées ou d'autres contextes non-JSX.

export function CheckoutSummary({ total }: { total: number }) {
  const formatCurrency = useFormatCurrency();

  return (
    <button aria-label={`Pay ${formatCurrency(total, "USD")}`}>Checkout</button>
  );
}

La fonction auxiliaire renvoie une chaîne de caractères simple adaptée à tout contexte où les composants JSX ne peuvent pas être utilisés.