<Num>

Aperçu

Le composant <Num> affiche une chaîne de caractères représentant un nombre formaté selon la locale de l'utilisateur, et peut être personnalisé avec des options de formatage.

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

Tout le reformatage est effectué localement à l'aide de 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 à afficher à l'intérieur du composant. Il s'agit généralement d'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 converties en nombres avant le formatage.
`options`	Options de formatage facultatives pour le nombre, suivant la spécification `Intl.NumberFormatOptions`. Utilisez ceci pour définir des styles comme 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.

Retour

JSX.Element contenant le nombre formaté sous forme de 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-react';

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 définir explicitement la locale pour le composant <Num>.

PriceDisplay.jsx

import { Num } from 'gt-react';

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

Traduction des composants `<Num>`

Supposons que vous souhaitez que votre nombre apparaisse 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-react';

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 pour le formatage.

import { Num } from 'gt-react';

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 langue de l'utilisateur.
Lorsqu'il est utilisé à l'intérieur d'un composant <T>, assurez-vous d'entourer tous les nombres dynamiques avec un composant <Num>.

Prochaines étapes

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

<Num>

Sur cette page