# react-native: Currency
URL: https://generaltranslation.com/fr/docs/react-native/api/components/currency.mdx
---
title: Currency
description: Référence de l’API pour le 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 au format monétaire.
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>
// 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. S&#39;il est fourni, il prévaut 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&#39;est pas fournie, la valeur de `children` est utilisée à la place. Peut être une chaîne ou un nombre. Les chaînes sont converties en nombres avant le formatage.                                                                                                                                                                       |
| `currency` | Le code de devise, comme &quot;USD&quot; ou &quot;EUR&quot;. Il détermine le symbole et le format utilisés pour l&#39;affichage de 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 tels que le nombre maximal de chiffres après la virgule, le regroupement, etc.                                                  |
| `locales`  | Paramètres régionaux facultatifs pour 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 le montant formaté sous forme de chaîne de caractères.

***

## 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-react-native'; // [!code highlight]

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

### Indiquer la devise

Ici, nous affichons le prix en euros.

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

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

### Traduire des composants Currency

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

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

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 spécifiant exactement 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 en savoir plus sur les 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-native';

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 en fonction du paramètre régional actuel et des 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 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>` et d’autres composants variables comme `<Num>`, `<DateTime>` et `<Var>`, consultez la documentation [Utiliser les composants variables](/docs/react-native/guides/variables).