Panoramica

Il componente <Num> visualizza una stringa numerica formattata in base alla lingua/locale dell’utente e può essere personalizzato tramite opzioni di formattazione.

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

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

Riferimenti

Proprietà

Descrizione

Valore restituito

JSX.Element che contiene il numero formattato come stringa.

Esempi

Esempio di base

In questo esempio, item.quantity verrà formattato in base alla lingua e alle impostazioni locali dell’utente.

import { Num } from 'gt-next';

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

Specificare le impostazioni locali

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

import { Num } from 'gt-next';

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

Tradurre i componenti <Num>

Poniamo che tu voglia inserire il numero in una frase più lunga che verrà tradotta. Ti basta racchiudere il contenuto nei componenti <T>.

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

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

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 alle impostazioni locali 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 variabili come <Currency>, <DateTime> e <Var>,