Présentation

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>
// Résultat : 100

Tout le reformatage est géré 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 reformaté en fonction du 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 AffichageDuCompte(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’ajouter les composants <T> autour du contenu.

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

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

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 d’exemples d’utilisation du composant <Num> et d’autres composants variables comme <Currency>, <DateTime> et <Var>,