<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 de devise ne gère que 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 à rendre à l'intérieur du composant. Généralement un nombre représentant la valeur à formater en devise. S'il est fourni, il prend la priorité 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. Se rabattra sur children si non fourni. Peut être une chaîne ou un nombre. Les chaînes seront analysées en nombres avant le formatage.
`currency`	Le type de devise, tel que "USD" ou "EUR". Cela détermine le symbole et le formatage 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 tels que le nombre maximum de chiffres décimaux, le regroupement, etc.
`locales`	Locales optionnelles pour spécifier la locale 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.

Retourne

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

Exemples

Exemple de base

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

PriceDisplay.jsx

import { Currency } from 'gt-next';

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

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      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-next';

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 tous paramètres optionnels transmis.
Le composant currency ne gère que 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 en utilisant 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