# General Translation React SDKs (gt-react, gt-next): Formattazione di numeri e date
URL: https://generaltranslation.com/it/docs/react/guides/formatting-variables.mdx
---

title: Formattazione di numeri e date
description: Come inserire nei contenuti di General Translation numeri, valute, date e variabili adattati all'impostazione regionale in React, Next.js, TanStack Start e React Native.
related:
  links:
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales

---

I valori dinamici all'interno dei contenuti tradotti devono essere contrassegnati in modo da non essere inviati alla traduzione, e i valori formattati devono rispettare l'impostazione regionale del lettore. General Translation fornisce variable components per entrambi gli scopi. Questi componenti condividono lo stesso core in tutti i framework: cambia solo il pacchetto di importazione.

## Inserisci un valore non elaborato con `<Var>` [#var]

Usa [`<Var>`](/docs/react/reference/components/var) per il contenuto dinamico che deve essere visualizzato così com&#39;è, ad esempio il nome di un utente. Contrassegna il valore come variabile, così il testo circostante resta traducibile.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Var } from 'gt-react';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Var } from 'gt-next';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Var } from 'gt-tanstack-start';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Var } from 'gt-react-native';

    <T>
      <Text>Signed in as <Var>{user.email}</Var></Text>
    </T>;
    ```
  </Tab>
</Tabs>

## Formatta numeri e valute [#numbers]

Usa [`<Num>`](/docs/react/reference/components/num) e [`<Currency>`](/docs/react/reference/components/currency) per formattare numeri e importi monetari in base all&#39;impostazione regionale. Entrambi accettano opzioni `Intl` e vengono importati dal pacchetto del tuo framework insieme a [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  <p>You have <Num>{count}</Num> items totaling <Currency currency="USD">{total}</Currency>.</p>
</T>;
```

`<Currency>` usa `USD` come valore predefinito; specifica `currency` per un altro codice. Formatta il valore in base all&#39;impostazione regionale, ma non converte tra valute.

## Formattare date e orari [#dates]

Usa [`<DateTime>`](/docs/react/reference/components/datetime) per date e orari assoluti e [`<RelativeTime>`](/docs/react/reference/components/relative-time) per valori relativi come &quot;3 giorni fa&quot;. Entrambi accettano opzioni di formattazione `Intl` e una sovrascrittura facoltativa di `locales`.

```tsx
<T>
  <p>Published <DateTime>{publishedAt}</DateTime> (<RelativeTime>{publishedAt}</RelativeTime>).</p>
</T>;
```

`<RelativeTime>` può anche accettare `value` e `unit` espliciti (ad esempio `value={-3}` con `unit="day"`) invece di una data.

Consulta il [riferimento dei componenti](/docs/react/reference/components/num) per tutte le prop accettate da questi componenti.
## Next steps

- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales