Panoramica

Il componente <Num> visualizza una stringa numerica formattata in base alle impostazioni locali dell’utente e può essere personalizzato con opzioni di formattazione.

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

Tutto il riformattamento è gestito localmente tramite la libreria Intl.NumberFormat.

Riferimenti

Props

Descrizione

Restituisce

JSX.Element che contiene il numero formattato come stringa.

Esempi

Esempio di base

In questo esempio, item.quantity verrà formattato in base alla locale dell’utente.

import { Num } from 'gt-react';

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

Specificare le lingue locali

Per impostazione predefinita, le lingue locali sono determinate dalle impostazioni del browser dell'utente, ma puoi impostare esplicitamente la lingua locale per il componente <Num>.

import { Num } from 'gt-react';

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

Tradurre i componenti <Num>

Poniamo che tu voglia inserire un numero all’interno di una frase più lunga che verrà tradotta. Ti basta avvolgere il contenuto con i componenti <T>.

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

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

Formattazione personalizzata

<Num> usa la libreria Intl.NumberFormat per il formato dei numeri.

import { Num } from 'gt-react';

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

Note

• Il componente <Num> viene utilizzato per formattare i numeri in base alla lingua/locale dell’utente.
• All’interno di un componente <T>, assicurati di racchiudere tutti i numeri dinamici in un componente <Num>.

Prossimi passi

• Per ulteriori dettagli ed esempi d’uso del componente <Num> e di altri componenti di variabile come <Currency>, <DateTime> e <Var>,