Présentation

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

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

Tout le reformatage est effectué localement à l’aide de la bibliothèque Intl.NumberFormat.

Références

Props

Description

Renvoie

JSX.Element contenant la monnaie formatée sous forme de chaîne.

Exemples

Exemple simple

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

import { Currency } from 'gt-next';

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-next';

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

Traduction des composants <Currency>

Supposons que vous souhaitiez afficher la devise au sein d’une phrase également traduite. Vous pouvez encapsuler le composant <Currency> dans un composant <T>.

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

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

Formatage personnalisé

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

import { Currency } from 'gt-next';

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

Notes

• Le composant <Currency> sert à formater des montants en fonction du locale actuel et des paramètres optionnels fournis.
• Le composant de devise s’occupe uniquement du formatage et n’effectue aucun calcul de taux de change.
• Le contenu du composant <Currency> n’est pas envoyé à l’API pour traduction. Toute la mise en forme est réalisée localement à l’aide de la bibliothèque Intl.NumberFormat.

Prochaines étapes

• Pour en savoir plus et voir des exemples d’utilisation du composant <Currency> ainsi que d’autres composants variables comme <Num>, <DateTime> et <Var>,