<Currency>

Aperçu

Le composant <Currency> affiche une valeur numérique sous forme de devise. Le nombre est formaté en fonction de la langue actuelle et de tous les paramètres optionnels transmis. Le composant currency gère uniquement le formatage et n'effectue aucun calcul de taux de change.

<Currency>{100}</Currency>
// Output: $100.00

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

Référence

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`currency??`	`string`	`"USD"`
`value??`	`string \| number`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Description

Prop	Description
`children`	Le contenu à afficher à l'intérieur du composant. Il s'agit généralement d'un nombre représentant la valeur à formater en tant que devise. Si fourni, il prend le pas sur la prop `value`.
`name`	Nom optionnel pour le champ de devise, utilisé à des fins de métadonnées.
`value`	La valeur par défaut pour la devise. Sera remplacée par children si non fournie. Peut être une chaîne ou un nombre. Les chaînes seront converties en nombres avant le formatage.
`currency`	Le type de devise, tel que "USD" ou "EUR". Cela détermine le symbole et le format utilisés pour la devise.
`options`	Options de formatage optionnelles pour la devise, suivant la spécification `Intl.NumberFormatOptions`. Utilisez ceci pour définir des styles comme le nombre maximum de chiffres après la virgule, le groupement, etc.
`locales`	Locales optionnelles pour spécifier la langue de formatage. Si non fourni, la locale par défaut de l'utilisateur est utilisée. En savoir plus sur la spécification des locales ici.

Retour

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

Exemples

Exemple de base

Le composant <Currency> peut être utilisé pour afficher des valeurs monétaires localisées.

PriceDisplay.jsx

import { Currency } from 'gt-react'; 

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

Spécification de la devise

Ici, nous affichons le prix en euros.

PriceDisplay.jsx

import { Currency } from 'gt-react';

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

Traduction des composants `<Currency>`

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

PriceDisplay.jsx

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <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"). Lisez-en plus sur les Intl.NumberFormatOptions pour plus d'options.

PriceDisplay.jsx

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> est utilisé pour formater les valeurs monétaires en fonction de la locale actuelle et de tout paramètre optionnel passé.
Le composant currency gère uniquement le formatage et n'effectue aucun calcul de taux de change.
Le contenu du composant <Currency> ne sera 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>, consultez la documentation Utilisation des composants de variables.

<Currency>

Sur cette page