Vue d’ensemble

Le composant <Currency> affiche une valeur numérique au format monétaire. Le nombre est mis en forme en fonction de la locale actuelle et des éventuels paramètres optionnels passés. Ce composant se limite au formatage et n’effectue aucun calcul de taux de change.

<Currency>{100}</Currency>
// Sortie : 100,00 $

Tous les reformatages sont effectués localement à l’aide de la bibliothèque Intl.NumberFormat.

Références

Props

Description

Renvoie

JSX.Element contenant la devise formatée sous forme de chaîne de caractères.

Exemples

Exemple de base

Le composant <Currency> permet d’afficher des montants dans la devise locale.

import { Currency } from 'gt-react'; 

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> 
    );
}

Spécifier la devise

Ici, nous affichons le prix en euros.

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

Traduction des composants <Currency>

Disons que vous voulez afficher la devise dans une phrase qui est également traduite. Vous pouvez envelopper le composant <Currency> dans un composant <T>.

import { T, Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      Le prix est de <Currency> {item.price} </Currency>.
    </T> 
  );
}

Formatage personnalisé

Ici, nous affichons un prix en GBP en précisant exactement le nombre de décimales et en utilisant le symbole étroit de la devise (c’est‑à‑dire « $100 » plutôt que « US$100 »). Pour en savoir plus, consultez la documentation des Intl.NumberFormatOptions pour d’autres options.

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ 
        currencyDisplay: 'narrowSymbol', 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2, 
      }} 
    >
      {item.price}
    </Currency>
  );
}

Remarques

• Le composant <Currency> sert à formater des montants selon le locale actuel et d’éventuels paramètres optionnels.
• Ce composant se limite au formatage et n’effectue aucun calcul de taux de change.
• Le contenu du composant <Currency> n’est pas envoyé à l’API pour traduction. Tout reformatage est effectué localement à l’aide de la bibliothèque Intl.NumberFormat.

Prochaines étapes

• Pour plus de détails et des exemples d’utilisation du composant <Currency> et d’autres composants variables comme <Num>, <DateTime> et <Var>,