# General Translation React SDKs (gt-react, gt-next): RelativeTime
URL: https://generaltranslation.com/it/docs/react/reference/components/relative-time.mdx
---

title: RelativeTime
description: Formatta un tempo relativo localizzato, ad esempio "2 ore fa", con General Translation gt-react. Riferimento API per RelativeTime.

---

Il componente `<RelativeTime>` visualizza un tempo relativo localizzato, ad esempio &quot;2 ore fa&quot; o &quot;tra 3 giorni&quot;. Funziona selezionando automaticamente l&#39;unità più adatta a partire da un `Date` oppure da un valore e un&#39;unità espliciti.

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del framework che usi.*

## Panoramica [#overview]

Passa un `Date` come contenuto figlio e `<RelativeTime>` seleziona automaticamente l&#39;unità più adatta e formatta il tempo relativo rispetto a `baseDate`.

```tsx
<RelativeTime>{someDate}</RelativeTime>
// Output: "2 ore fa"
```

La formattazione viene gestita interamente in locale con [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

*Nota: `<RelativeTime>` può causare errori di idratazione di React nelle app con rendering lato server. Vedi [Come evitare gli errori di idratazione](#hydration).*

## Come funziona [#how-it-works]

* **Due modalità.** Fornisci un `Date` (tramite `children` o `date`) e il componente seleziona automaticamente l&#39;unità più adatta in base a `baseDate`, oppure fornisci `value` e `unit` espliciti, come in `Intl.RelativeTimeFormat`.
* **Formattazione locale.** Il tempo relativo viene calcolato e formattato nel browser; il valore non viene mai inviato all&#39;API di General Translation.
* **Non restituisce nulla senza input.** Se non viene fornita né una data né un valore, il componente restituisce `null`.

## Props [#props]

| Prop                     | Descrizione                                                            | Type                             | Facoltativo | Predefinito                          |
| ------------------------ | ---------------------------------------------------------------------- | -------------------------------- | ----------- | ------------------------------------ |
| [`children`](#children)  | Un `Date` da cui calcolare il tempo relativo.                          | `Date`                           | Sì          | —                                    |
| [`date`](#date)          | Un `Date` da cui calcolare. Ha la precedenza su `children`.            | `Date`                           | Sì          | —                                    |
| [`value`](#value)        | Quantità numerica esplicita. Richiede `unit`.                          | `number`                         | Sì          | —                                    |
| [`unit`](#unit)          | Unità di tempo, usata con `value`.                                     | `Intl.RelativeTimeFormatUnit`    | Sì          | —                                    |
| [`baseDate`](#base-date) | Data di riferimento per il calcolo.                                    | `Date`                           | Sì          | `new Date()`                         |
| [`options`](#options)    | Opzioni di `Intl.RelativeTimeFormat`.                                  | `Intl.RelativeTimeFormatOptions` | Sì          | `{ numeric: 'auto', style: 'long' }` |
| [`locales`](#locales)    | Consente di forzare l&#39;impostazione regionale per la formattazione. | `string[]`                       | Sì          | Impostazione regionale attiva        |
| [`name`](#name)          | Nome della variabile per la voce.                                      | `string`                         | Sì          | —                                    |

### `children` [#children]

**Tipo** `Date` · **Facoltativo**

Un oggetto `Date`. Il componente seleziona automaticamente l&#39;unità più adatta (dai secondi agli anni) e formatta il tempo relativo rispetto a `baseDate`.

### `date` [#date]

**Tipo** `Date` · **Opzionale**

Un valore `Date` da usare per calcolare il tempo relativo. Quando sono forniti sia `date` sia `children`, `date` ha la precedenza.

### `value` [#value]

**Tipo** `number` · **Facoltativo**

Un valore numerico esplicito per il tempo relativo (ad esempio, `-1` per &quot;ieri&quot;). Deve essere utilizzato insieme a `unit`.

### `unit` [#unit]

**Type** `Intl.RelativeTimeFormatUnit` · **Facoltativo**

L&#39;unità di tempo, ad esempio `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'` o `'year'`. Necessaria quando si usa `value`.

### `baseDate` [#base-date]

**Tipo** `Date` · **Facoltativo** · **Predefinito** `new Date()`

La data di riferimento rispetto alla quale viene calcolato il tempo relativo. Per impostazione predefinita, è `new Date()` al momento del rendering. Impostala esplicitamente per evitare errori di idratazione — vedi [sotto](#hydration).

### `options` [#options]

**Type** `Intl.RelativeTimeFormatOptions` · **Facoltativo** · **Predefinito** `{ numeric: 'auto', style: 'long' }`

Opzioni di formattazione che seguono la specifica [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

### `locales` [#locales]

**Tipo** `string[]` · **Facoltativo** · **Predefinito** Impostazione regionale attiva

Le impostazioni regionali da usare per la formattazione. Se omesso, viene usata l&#39;impostazione regionale attiva. Consulta l&#39;[argomento locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Tipo** `string` · **Facoltativo**

Un nome facoltativo per la voce, utilizzato come metadato.

## Esempi [#examples]

```tsx title="PostTimestamp.tsx"
import { RelativeTime } from 'gt-react';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>; // [!code highlight]
  // Output: "2 ore fa", "3 giorni fa", "tra 5 minuti", ecc.
}
```

```tsx title="PostTimestamp.tsx"
import { RelativeTime } from 'gt-react';

export default function PostTimestamp({ post }) {
  return <RelativeTime date={post.createdAt} />; // [!code highlight]
}
```

```tsx title="Reminder.tsx"
import { RelativeTime } from 'gt-react';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
    </p>
  );
  // Output: "La tua prova termina tra 3 giorni."
}
```

```tsx title="Comment.tsx"
import { T, RelativeTime } from 'gt-react';

export default function Comment({ comment }) {
  return (
    <T>
      Posted <RelativeTime>{comment.createdAt}</RelativeTime> // [!code highlight]
    </T>
  );
}
```

```tsx title="NumericTimestamp.tsx"
import { RelativeTime } from 'gt-react';

export default function NumericTimestamp({ date }) {
  return (
    <RelativeTime
      options={{
        numeric: 'always', // [!code highlight]
        style: 'narrow', // [!code highlight]
      }}
    >
      {date}
    </RelativeTime>
  );
  // Con numeric: 'always', restituisce "1 day ago" anziché "yesterday"
}
```

## Evitare gli errori di idratazione [#hydration]

Poiché `<RelativeTime>` calcola il tempo relativo localmente, può generare un output diverso sul server e sul client, causando un errore di idratazione. In genere accade quando:

* **`baseDate` usa `new Date()` come valore predefinito al momento del rendering.** Il server e il client eseguono il rendering in momenti leggermente diversi. Se nel frattempo il tempo relativo passa da un&#39;unità all&#39;altra (ad esempio, &quot;59 secondi fa&quot; → &quot;1 minuto fa&quot;), l&#39;output non corrisponderà.
* **L&#39;impostazione regionale predefinita è diversa nei vari ambienti**, producendo stringhe diverse (ad esempio, &quot;hace 2 horas&quot; vs. &quot;2 hours ago&quot;).

Blocca sia l&#39;impostazione regionale sia un `baseDate` condiviso, in modo che server e client producano sempre la stessa stringa:

```tsx
const now = new Date(); // calcolato una volta, passato sia al server che al client

<RelativeTime locales={['en-US']} baseDate={now}>
  {post.createdAt}
</RelativeTime>
```