Vue d’ensemble

Le composant <Currency> affiche une valeur numérique au format monétaire. Le nombre est formaté en fonction de la locale actuelle et des paramètres optionnels transmis. 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 en chaîne de caractères.

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 dans une phrase qui est également traduite. Vous pouvez envelopper 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 le 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>
  );
}

Remarques

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

Prochaines étapes

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