# gt-next: General Translation Next.js SDK: Num
URL: https://generaltranslation.com/fr/docs/next/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 numérique mise en forme 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

### 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 définies. Si cette prop est fournie, elle prévaut 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 de formatage facultatives pour le 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`  | Paramètres régionaux facultatifs permettant de spécifier 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 façon de spécifier les paramètres régionaux, consultez [cette page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Renvoie

Un `JSX.Element` contenant le nombre mis en forme 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-next';

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 par les 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-next';

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


### Traduire les composants Num

Supposons que vous vouliez 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-next';

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-next';

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 à entourer tous les nombres dynamiques d’un composant `<Num>`.

## Prochaines étapes

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