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

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


## Vue d’ensemble

Le composant `<Num>` affiche une chaîne de caractères numérique formatée selon le paramètre régional de l&#39;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

### Propriétés

<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` | Le 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 fournies. S’il est renseigné, 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, 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 la devise, la précision décimale, etc.                                                                                       |
| `locales`  | Valeurs `locales` facultatives permettant de définir 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 [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';

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


### Définir les paramètres régionaux

Par défaut, le paramètre régional est déterminé par les paramètres du navigateur de l’utilisateur,
mais vous pouvez définir explicitement celui du composant `<Num>`.

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

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


### Traduire les 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';

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 effectuer le formatage.

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

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>`.

## Étapes suivantes

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