Vue d’ensemble

Le composant <Num> affiche une chaîne numérique formatée selon la locale de l’utilisateur et peut être personnalisé à l’aide d’options de formatage.

<Num>{100}</Num>
// Résultat : 100

Tous les reformatages sont effectués localement à l’aide de la bibliothèque Intl.NumberFormat.

Références

Props

Description

Renvoie

JSX.Element contenant le nombre mis en forme sous forme de chaîne.

Exemples

Exemple simple

Dans cet exemple, item.quantity sera reformatté 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. Il suffit d’entourer le contenu avec les composants <T>.

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>
  );
}

Mise en forme personnalisée

<Num> s’appuie sur 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>
  );
}

Remarques

• Le composant <Num> sert à formater les nombres selon la locale de l’utilisateur.
• À l’intérieur d’un composant <T>, veillez à encapsuler tous les nombres dynamiques dans 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>,