Vue d’ensemble

Le composant <Num> affiche un nombre formaté selon le locale de l’utilisateur et peut être personnalisé avec des options de formatage.

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

Tout le reformatage est effectué localement à l’aide de la bibliothèque Intl.NumberFormat.

Références

Props

Description

Renvoie

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

Exemples

Exemple de base

Dans cet exemple, item.quantity sera formaté en fonction du locale de l’utilisateur.

import { Num } from 'gt-next';

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

Spécifier les 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>.

import { Num } from 'gt-next';

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

Traduction des composants <Num>

Supposons que vous souhaitiez intégrer votre nombre dans une phrase plus longue destinée à être traduite. Ajoutez simplement les composants <T> autour du contenu.

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

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

Mise en forme personnalisée

<Num> utilise la bibliothèque Intl.NumberFormat pour la mise en forme.

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 en fonction du locale de l’utilisateur.
• Lorsqu’il est utilisé à l’intérieur d’un composant <T>, veillez à envelopper tous les nombres dynamiques dans un composant <Num>.

Prochaines étapes

• Pour en savoir plus et voir des exemples d’utilisation du composant <Num> ainsi que d’autres composants de variables comme <Currency>, <DateTime> et <Var>,