<Num>

Aperçu

Le composant <Num> rend une chaîne de nombre formatée dans la langue 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
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`locales??`	`string[]`	`undefined`

Description

Prop	Description
`children`	Le contenu à rendre à l'intérieur du composant. Typiquement un nombre, qui sera formaté selon la locale et les options actuelles. Si fourni, il prend le pas 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 fourni, la locale par défaut de l'utilisateur est utilisée. En savoir plus sur la spécification des locales ici.

Renvoie

JSX.Element contenant le nombre formaté en tant que chaîne.

Exemples

Exemple de base

Dans cet exemple, item.quantity sera reformaté selon la locale de l'utilisateur.

QuantityDisplay.jsx

import { Num } from 'gt-next';
 
export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

Spécification des locales

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

PriceDisplay.jsx

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

Traduction des composants `<Num>`

Disons que vous voulez que votre nombre soit dans une phrase plus longue qui est traduite. Il suffit d'ajouter 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 de l'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 des exemples d'utilisation du composant <Num> et d'autres composants de variable comme <Currency>, <DateTime>, et <Var>, consultez la documentation Utilisation des composants de variable.

<Num>

Sur cette page