# react-native: Num
URL: https://generaltranslation.com/fr/docs/react-native/api/components/num.mdx
---
title: Num
description: Référence de l’API du composant Num
---

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


## Vue d’ensemble

Le composant `<Num>` affiche une chaîne de caractères représentant un nombre formaté selon le paramètre régional de l’utilisateur, et peut être personnalisé à l’aide d’options de formatage.

```jsx
<Num>{100}</Num>
// Sortie : 100
```

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?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop       | Description                                                                                                                                                                                                                                                                                                                                                                          |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | Contenu à afficher dans le composant. Il s’agit généralement d’un nombre, formaté selon le paramètre régional actuel et les options définies. S’il est fourni, il est prioritaire sur la prop `value`.                                                                                                                                                                               |
| `name`     | Nom facultatif du champ numérique, utilisé à des fins de métadonnées.                                                                                                                                                                                                                                                                                                                |
| `value`    | Valeur par défaut du nombre. Peut être une chaîne de caractères ou un nombre. Les chaînes de caractères sont converties en nombres avant le formatage.                                                                                                                                                                                                                               |
| `options`  | Options facultatives de formatage du nombre, conformes à 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 la devise, la précision décimale, etc.                                                                                        |
| `locales`  | Paramètres régionaux facultatifs permettant de définir le paramètre régional de formatage. S’ils ne sont pas fournis, 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 [ce lien](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Renvoie

`JSX.Element` contenant le nombre formaté sous forme de chaîne de caractères.

***

## Exemples

### Exemple de base

Dans cet exemple, `item.quantity` sera mis en forme selon le paramètre régional de l’utilisateur.

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

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```


### Spécifier les paramètres régionaux

Par défaut, les paramètres régionaux sont déterminés à partir des réglages du navigateur de l’utilisateur,
mais vous pouvez définir explicitement le paramètre régional du composant `<Num>`.

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

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> // [!code highlight]
  );
}
```


### Traduire des composants Num

Supposons que vous souhaitiez intégrer votre nombre dans une phrase plus longue à traduire.
Ajoutez simplement les composants `<T>` autour du contenu.

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

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### Formatage personnalisé

`<Num>` utilise la bibliothèque [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) pour la mise en forme.

```jsx
import { Num } from 'gt-react-native';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}
```

***


## Remarques

* Le composant `<Num>` sert à formater les nombres selon le paramètre régional de l’utilisateur.
* À l’intérieur d’un composant `<T>`, veillez à encapsuler tous les nombres dynamiques dans un composant `<Num>`.

## Prochaines étapes

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