# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/fr/docs/react/reference/components/num.mdx Docs index: https://generaltranslation.com/llms.txt Description: Formate un nombre selon le paramètre régional actif. Référence d’API pour le composant ``. Le composant `` applique à un nombre un groupement des chiffres et un formatage décimal adaptés au paramètre régional. Il s’agit d’un composant variable à utiliser dans un [``](/docs/react/reference/components/t) ou seul. *Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`.* ## Vue d’ensemble [#overview] Passez un nombre en tant qu’élément enfant et `` le met en forme selon le paramètre régional actif. ```tsx {100} // 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] * **Formatage local.** 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 [``](/docs/react/reference/components/t).** Lorsqu’il est utilisé dans un [``](/docs/react/reference/components/t), encapsulez chaque nombre dynamique dans un `` 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** `{}` La prop accepte [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Parmi les options courantes : | Option | Description | Type | Facultatif | Par défaut | | -------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------- | | `localeMatcher` | Algorithme de correspondance des paramètres régionaux. | `'lookup' \| 'best fit'` | Oui | `'best fit'` | | `numberingSystem` | Système de numérotation, tel que `latn` ou `arab`. | `string` | Oui | `'latn'` | | `style` | Formatage d’un nombre simple, d’une devise, d’un pourcentage ou d’une unité. | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | Oui | `'decimal'` | | `currency` | Code de devise ISO 4217. Obligatoire lorsque `style` est défini sur `'currency'`. | `string` | Oui | — | | `currencyDisplay` | Mode d’affichage d’une devise. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Oui | `'symbol'` | | `currencySign` | Notation standard ou comptable pour les valeurs monétaires négatives. | `'standard' \| 'accounting'` | Oui | `'standard'` | | `unit` | Identifiant d’unité, tel que `kilometer` ou `megabyte`. Obligatoire lorsque `style` est défini sur `'unit'`. | `string` | Oui | — | | `unitDisplay` | Largeur du libellé de l’unité. | `'long' \| 'short' \| 'narrow'` | Oui | `'short'` | | `minimumIntegerDigits` | Nombre minimal de chiffres entiers ; les valeurs plus courtes sont complétées par des zéros. | `number` (`1`–`21`) | Oui | `1` | | `minimumFractionDigits` | Nombre minimal de chiffres après le séparateur décimal. | `number` (`0`–`100`) | Oui | Selon le style | | `maximumFractionDigits` | Nombre maximal de chiffres après le séparateur décimal. | `number` (`0`–`100`) | Oui | Selon le style | | `minimumSignificantDigits` | Nombre minimal de chiffres significatifs. | `number` (`1`–`21`) | Oui | `1` | | `maximumSignificantDigits` | Nombre maximal de chiffres significatifs. | `number` (`1`–`21`) | Oui | `21` | | `roundingPriority` | Indique si les chiffres fractionnaires ou significatifs sont prioritaires. | `'auto' \| 'morePrecision' \| 'lessPrecision'` | Oui | `'auto'` | | `roundingIncrement` | Incrément utilisé pour le niveau d’arrondi sélectionné. | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000` | Oui | `1` | | `roundingMode` | Direction utilisée lors de l’arrondi. | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Oui | `'halfExpand'` | | `trailingZeroDisplay` | Indique s’il faut conserver les zéros finaux des nombres entiers. | `'auto' \| 'stripIfInteger'` | Oui | `'auto'` | | `notation` | Notation standard, scientifique, d’ingénierie ou compacte. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Oui | `'standard'` | | `compactDisplay` | Libellés longs ou courts pour la notation compacte. | `'short' \| 'long'` | Oui | `'short'` | | `useGrouping` | Indique quand afficher les séparateurs de regroupement. | `boolean \| 'always' \| 'auto' \| 'min2'` | Oui | `'auto'` ; `'min2'` avec la notation compacte | | `signDisplay` | Indique quand afficher un signe positif ou négatif. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Oui | `'auto'` | * Les valeurs par défaut du nombre de chiffres après la virgule dépendent de `style` et, pour les devises, des sous-unités monétaires standard. * `compactDisplay` s'applique uniquement lorsque `notation` est défini sur `'compact'`. * `roundingIncrement` ne peut pas être combiné avec un arrondi à chiffres significatifs ni avec une `roundingPriority` autre que `'auto'`. * Les unités, systèmes de numérotation, champs d'arrondi et valeurs d'option pris en charge dépendent du runtime JavaScript. Consultez la [documentation des options de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) pour connaître les dernières options disponibles et le comportement du runtime. ### `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] *Les exemples importent depuis `gt-react` ; importez plutôt depuis le paquet de votre framework.* ```tsx title="QuantityDisplay.tsx" import { Num } from 'gt-react'; export default function Inventory({ item }) { return {item.quantity}; // [!code highlight] } ``` ```tsx title="CountDisplay.tsx" import { Num } from 'gt-react'; export default function CountDisplay({ item }) { return {item.count}; // [!code highlight] } ``` ```tsx title="DynamicPriceDisplay.tsx" import { T, Num } from 'gt-react'; export default function DynamicPriceDisplay({ item }) { return ( There are {item.count} units available. // [!code highlight] ); } ``` ```tsx title="CustomFormat.tsx" import { Num } from 'gt-react'; export default function CustomFormat({ number }) { return ( {number} ); } ``` ## Notes [#notes] * `` met les nombres en forme selon le paramètre régional actif. * À l’intérieur d’un [``](/docs/react/reference/components/t), encapsulez tous les nombres dynamiques dans un ``. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.