# gt-react: General Translation React SDK: Currency
URL: https://generaltranslation.com/fr/docs/react/api/components/currency.mdx
---
title: Currency
description: Référence de l’API du composant Currency
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Le composant `<Currency>` affiche une valeur numérique au format monétaire.
Le nombre est formaté en fonction du paramètre régional actuel et des paramètres facultatifs fournis.
Le composant `<Currency>` gère uniquement le formatage et n’effectue aucun calcul de taux de change.

```jsx
<Currency>{100}</Currency>
// Résultat : $100.00
```

Le reformatage est entièrement géré localement à l’aide de la bibliothèque [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Référence

### Props

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valeur facultative. Si elle n’est pas fournie, children sera utilisé comme valeur.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop       | Description                                                                                                                                                                                                                                                                                                                                                                                     |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Le contenu à afficher dans le composant. Il s&#39;agit généralement d&#39;un nombre représentant la valeur à formater en devise. Si cette prop est fournie, elle est prioritaire sur `value`.                                                                                                                                                                                                   |
| `name`     | Nom facultatif du champ de devise, utilisé à des fins de métadonnées.                                                                                                                                                                                                                                                                                                                           |
| `value`    | Valeur par défaut de la devise. Si elle n&#39;est pas fournie, `children` est utilisé comme valeur de repli. Peut être une chaîne ou un nombre. Les chaînes sont converties en nombres avant le formatage.                                                                                                                                                                                      |
| `currency` | Type de devise, par exemple &quot;USD&quot; ou &quot;EUR&quot;. Il détermine le symbole et le formatage utilisés pour la devise.                                                                                                                                                                                                                                                                |
| `options`  | Options facultatives de formatage de la devise, conformément à la [spécification `Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Utilisez-les pour définir des paramètres comme le nombre maximal de chiffres après la virgule, le regroupement, etc.                                                          |
| `locales`  | Paramètres régionaux facultatifs permettant de définir le paramètre régional de formatage. S&#39;ils ne sont pas fournis, le paramètre régional par défaut de l&#39;utilisateur est utilisé. Pour en savoir plus sur la spécification des paramètres régionaux, consultez [cette page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Renvoie

`JSX.Element` contenant la valeur monétaire formatée sous forme de chaîne.

***

## Exemples

### Exemple de base

Le composant `<Currency>` peut être utilisé pour afficher des montants dans la devise locale.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```


### Indiquer la devise

Ici, le prix est affiché en euros.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```


### Traduire les composants Currency

Supposons que vous vouliez afficher la devise dans une phrase elle aussi traduite.
Vous pouvez envelopper le composant `<Currency>` dans un composant `<T>`.

```jsx title="PriceDisplay.jsx" copy
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> // [!code highlight]
  );
}
```


### Formatage personnalisé

Ici, nous affichons le prix en GBP en fixant précisément le nombre de décimales et en utilisant le symbole monétaire étroit (c.-à-d. &quot;$100&quot; plutôt que &quot;US$100&quot;).
Pour découvrir d’autres options, consultez la documentation sur [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react';

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

***


## Remarques

* Le composant `<Currency>` sert à formater les valeurs monétaires selon le paramètre régional actuel et les éventuels paramètres optionnels fournis.
* 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 être traduit.
  Tout le reformatage est effectué localement à l’aide de la bibliothèque [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Prochaines étapes

* Pour en savoir plus et voir des exemples d’utilisation du composant `<Currency>` et d’autres composants de variables comme `<Num>`, `<DateTime>` et `<Var>`, consultez la documentation [Utiliser les composants de variables](/docs/react/guides/variables).