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

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


## Vue d’ensemble

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

```jsx
<Currency>{100}</Currency>
// Sortie : $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

### Propriétés

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valeur facultative. children sera utilisé comme valeur s’il n’est pas fourni.',
      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 à l’intérieur du composant. Il s’agit généralement d’un nombre représentant la valeur à formater en devise. S’il est fourni, il est prioritaire sur la prop `value`.                                                                                                                                                                                         |
| `name`     | Nom facultatif du champ de devise, utilisé à des fins de métadonnées.                                                                                                                                                                                                                                                                                                              |
| `value`    | La valeur par défaut de la devise. Si elle n’est pas fournie, `children` est utilisé à la place. Elle peut être une chaîne ou un nombre. Les chaînes sont converties en nombres avant le formatage.                                                                                                                                                                                |
| `currency` | Le type de devise, tel que &quot;USD&quot; ou &quot;EUR&quot;. Cela 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 styles comme le nombre maximal de chiffres après la virgule, le groupement, etc.                                                   |
| `locales`  | Valeurs `locales` facultatives pour spécifier le paramètre régional de formatage. Si elles ne sont pas fournies, le paramètre régional par défaut de l’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 le montant formaté sous forme de chaîne.

***

## Exemples

### Exemple de base

Le composant `<Currency>` peut être utilisé pour afficher des montants localisés.

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

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


### Spécifier la devise

Ici, le prix est affiché en euros.

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

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


### Traduire des composants `<Currency>`

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

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

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 avec un nombre précis de décimales et en utilisant le symbole monétaire étroit (c.-à-d. &quot;$100&quot; plutôt que &quot;US$100&quot;).
Pour en savoir plus et découvrir d’autres options, consultez [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-next';

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 paramètres facultatifs 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 traduction.
  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 plus de détails et d’exemples d’utilisation du composant `<Currency>` ainsi que d’autres composants variables comme `<Num>`, `<DateTime>` et `<Var>`, consultez la documentation [Utilisation des composants variables](/docs/next/guides/variables).