<Num>

Aperçu

Le composant <Num> affiche une chaîne de nombre formatée dans la locale de l'utilisateur, et peut être personnalisé avec des options de formatage.

<Num>{100}</Num>
// Output: 100

Tout le reformatage est géré localement en utilisant la bibliothèque Intl.NumberFormat.

Référence

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`value??`	`string \| number`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Description

Prop	Description
`children`	Le contenu à rendre à l'intérieur du composant. Généralement un nombre, qui sera formaté selon la locale actuelle et les options. S'il est fourni, il prend la priorité sur la prop `value`.
`name`	Nom optionnel pour le champ numérique, utilisé à des fins de métadonnées.
`value`	La valeur par défaut pour le nombre. Peut être une chaîne ou un nombre. Les chaînes seront analysées en nombres avant le formatage.
`options`	Options de formatage optionnelles pour le nombre, suivant la spécification `Intl.NumberFormatOptions`. Utilisez ceci pour définir des styles tels que la devise, la précision décimale, etc.
`locales`	Locales optionnelles pour spécifier la locale de formatage. Si non fournie, la locale par défaut de l'utilisateur est utilisée. En savoir plus sur la spécification des locales ici.

Retourne

JSX.Element contenant le nombre formaté sous forme de chaîne.

Exemples

Exemple de base

Dans cet exemple, item.quantity sera reformaté selon les paramètres régionaux de l'utilisateur.

QuantityDisplay.jsx

import { Num } from 'gt-next';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

Spécifier les paramètres régionaux

Par défaut, les paramètres régionaux sont déterminés par les paramètres du navigateur de l'utilisateur, mais vous pouvez définir explicitement les paramètres régionaux pour le composant <Num>.

PriceDisplay.jsx

import { Num } from 'gt-next';

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

Traduire les composants `<Num>`

Supposons que vous souhaitiez que votre nombre soit dans une phrase plus longue qui est traduite. Ajoutez simplement les composants <T> autour du contenu.

DynamicPriceDisplay.jsx

import { T, Num } from 'gt-next';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      Il y a <Num> {item.count} </Num> unités disponibles. // [!code highlight]
    </T>
  );
}

Formatage personnalisé

<Num> utilise la bibliothèque Intl.NumberFormat pour le formatage.

import { Num } from 'gt-next';

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

Notes

Le composant <Num> est utilisé pour formater les nombres selon la locale d'un utilisateur.
Lorsqu'il est à l'intérieur d'un composant <T>, assurez-vous d'envelopper tous les nombres dynamiques dans un composant <Num>.

Prochaines étapes

Pour plus de détails et d'exemples d'utilisation du composant <Num> et d'autres composants de variables comme <Currency>, <DateTime>, et <Var>, consultez la documentation Utilisation des composants de variables.

<Num>

Sur cette page