Aperçu

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

<Num>{100}</Num>
// Sortie : 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 formaté sous forme de chaîne.

Exemples

Exemple de base

Dans cet exemple, item.quantity sera reformatté selon le locale de l’utilisateur.

import { Num } from 'gt-react';

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

Définir 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-react';

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-react';

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-react';

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

Remarques

• Le composant <Num> est utilisé pour formater les nombres en fonction de la locale d’un utilisateur.
• Lorsqu’il se trouve dans un composant <T>, veillez à encapsuler 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>,