# General Translation React SDKs (gt-react, gt-next): Currency
URL: https://generaltranslation.com/fr/docs/react/reference/components/currency.mdx
---

title: Currency
description: Formater un montant dans une devise selon le paramètre régional actif avec General Translation gt-react. Référence d’API pour Currency.

---

Le composant `<Currency>` affiche une valeur numérique au format monétaire pour le paramètre régional actif. Il se limite au formatage — il n’effectue aucune conversion selon le taux de change.

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Vue d’ensemble [#overview]

Passez un montant comme élément enfant, puis définissez le code `currency`.

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

Tout le formatage est géré localement avec [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Fonctionnement [#how-it-works]

* **Formatage local.** Le montant est mis en forme dans le navigateur à l’aide de `Intl.NumberFormat`. Sa valeur n’est jamais envoyée à l’API de General Translation.
* **Aucune conversion.** `<Currency>` met en forme le symbole, les séparateurs de milliers et les décimales pour la devise et le paramètre régional choisis, mais ne convertit pas d’une devise à l’autre.
* **Résolution du paramètre régional.** Le paramètre régional actif détermine le formatage, sauf s’il est remplacé par `locales`.

## Props [#props]

| Prop                    | Description                                               | Type                       | Facultatif | Par défaut               |
| ----------------------- | --------------------------------------------------------- | -------------------------- | ---------- | ------------------------ |
| [`children`](#children) | La valeur à mettre en forme.                              | `number \| string`         | Non        | —                        |
| [`currency`](#currency) | Code de devise ISO 4217.                                  | `string`                   | Oui        | `USD`                    |
| [`options`](#options)   | Options de `Intl.NumberFormat`.                           | `Intl.NumberFormatOptions` | Oui        | `{}`                     |
| [`locales`](#locales)   | Remplace le paramètre régional utilisé pour le formatage. | `string[]`                 | Oui        | Paramètre régional actif |
| [`name`](#name)         | Nom de variable de l’entrée.                              | `string`                   | Oui        | —                        |

### `children` [#children]

**Type** `number | string` · **Obligatoire**

Le montant à formater au format monétaire. Les chaînes de caractères sont converties en nombres avant le formatage.

### `currency` [#currency]

**Type** `string` · **Facultatif** · **Par défaut** `USD`

Le code de devise ISO 4217, par exemple `USD` ou `EUR`. Il détermine le symbole et la mise en forme.

### `options` [#options]

**Type** `Intl.NumberFormatOptions` · **Facultatif** · **Par défaut** `{}`

Options de mise en forme conformes à la spécification [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), comme `currencyDisplay` et les limites du nombre de chiffres après la virgule.

### `locales` [#locales]

**Type** `string[]` · **Facultatif** · **Par défaut** Paramètre régional actif

Paramètres régionaux à utiliser pour la mise en forme. Si ce paramètre est omis, le paramètre régional actif est utilisé. Consultez l’[argument locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Type** `string` · **Facultatif**

Nom facultatif du champ de type devise, utilisé comme métadonnée.

## Exemples [#examples]

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

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

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

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

```tsx title="PriceDisplay.tsx"
import { T, Currency } from 'gt-react';

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

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

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

## Notes [#notes]

* `<Currency>` met en forme les valeurs monétaires selon le paramètre régional actif ; il ne convertit pas les devises.
* Son contenu est mis en forme localement et n’est jamais envoyé à l’API.