Présentation

Le composant <Currency> affiche une valeur numérique au format monétaire. Le nombre est formaté en fonction de la locale active 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 $

Tous les remises en forme sont gérées localement à l’aide de la bibliothèque Intl.NumberFormat.

Références

Props

Description

Renvoie

JSX.Element contenant la devise mise en forme sous forme de chaîne.

Exemples

Exemple simple

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 que la devise apparaisse dans une phrase qui est elle aussi traduite. Vous pouvez encapsuler 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 le prix en GBP en spécifiant exactement le nombre de décimales et en utilisant le symbole étroit pour la Devise (c’est‑à‑dire « $100 » plutôt que « US$100 »). Pour en savoir plus, consultez la documentation des Intl.NumberFormatOptions pour davantage d’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>
  );
}

Notes

• Le composant <Currency> sert à formater des montants en devise selon le locale actuel et d’éventuels paramètres optionnels fournis.
• 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’utilisation du composant <Currency> ainsi que d’autres composants de variables comme <Num>, <DateTime> et <Var>,