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

title: Num
description: Formate un nombre selon le paramètre régional actif avec General Translation gt-react. Référence d’API pour Num.

---

Le composant `<Num>` affiche un nombre mis en forme selon le paramètre régional actif. Il s’agit d’un composant variable à utiliser dans un [`<T>`](/docs/react/reference/components/t) ou seul.

*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 nombre en tant qu’élément enfant et `<Num>` le met en forme selon le paramètre régional actif.

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

La mise en forme est entièrement gérée localement avec [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Fonctionnement [#how-it-works]

* **Mise en forme locale.** Le nombre est reformaté dans le navigateur à l’aide de `Intl.NumberFormat`. Sa valeur n’est jamais envoyée à l’API de General Translation.
* **Résolution du paramètre régional.** Par défaut, le paramètre régional actif détermine les séparateurs de milliers et les séparateurs décimaux. Vous pouvez le remplacer pour chaque instance avec `locales`.
* **Dans un `<T>`.** Lorsqu’il est utilisé dans un `<T>`, encapsulez chaque nombre dynamique dans un `<Num>` afin qu’il soit traité comme une variable plutôt que comme du texte à traduire.

## Props [#props]

| Prop                    | Description                                               | Type                       | Facultatif | Par défaut               |
| ----------------------- | --------------------------------------------------------- | -------------------------- | ---------- | ------------------------ |
| [`children`](#children) | Le nombre à formater.                                     | `number \| string`         | Non        | —                        |
| [`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 nombre à formater. Les chaînes de caractères sont converties en nombres avant le formatage.

### `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 `style`, `maximumFractionDigits` et le groupement des chiffres.

### `locales` [#locales]

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

Paramètres régionaux à utiliser pour le formatage. Si ce paramètre est omis, le paramètre régional actif est utilisé. Voir 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 numérique, utilisé pour les métadonnées.

## Exemples [#examples]

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

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

```tsx title="CountDisplay.tsx"
import { Num } from 'gt-react';

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

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

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

```tsx title="CustomFormat.tsx"
import { Num } from 'gt-react';

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

## Notes [#notes]

* `<Num>` met les nombres en forme selon le paramètre régional actif.
* À l’intérieur d’un `<T>`, placez tous les nombres dynamiques dans un `<Num>`.