# react-native: RelativeTime
URL: https://generaltranslation.com/it/docs/react-native/api/components/relativetime.mdx
---
title: RelativeTime
description: Riferimento API del componente RelativeTime
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica il template in content/docs-templates/. */}


## Panoramica

Il componente `<RelativeTime>` esegue il rendering di una stringa di tempo relativo localizzata, ad esempio &quot;2 ore fa&quot; o &quot;tra 3 giorni&quot;.
Supporta due modalità d&#39;uso: selezionare automaticamente l&#39;unità più appropriata a partire da un `Date`, oppure specificare esplicitamente un valore e un&#39;unità.

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

Tutta la formattazione viene gestita localmente tramite l&#39;API [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

<Callout type="warn">
  `<RelativeTime>` può causare **errore di idratazione di React** nelle app renderizzate sul server. Vedi [Come evitare gli erroi di idratazione](#avoiding-hydration-errors) qui sotto.
</Callout>

## Riferimento

### Proprietà

<TypeTable
  type={{
  "children?": {
      description: 'Oggetto Date da cui calcolare il tempo relativo.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Oggetto Date da cui calcolare il tempo relativo. Ha la precedenza rispetto a children.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valore numerico esplicito per il tempo relativo. Richiede unit.',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: 'L’unità di tempo. Obbligatoria quando si usa value.',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Data di riferimento per calcolare il tempo relativo. Per impostazione predefinita usa new Date() al momento del rendering.',
      type: 'Date',
      optional: true,
      default: 'new Date()',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.RelativeTimeFormatOptions',
      optional: true,
      default: "{ numeric: 'auto', style: 'long' }",
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizione

| Nome prop  | Descrizione                                                                                                                                                                                                                                                                                                                                                             |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Un oggetto `Date`. Il componente seleziona automaticamente l&#39;unità migliore (secondi, minuti, ore, giorni, settimane, mesi o anni) e formatta il tempo relativo rispetto a `baseDate`.                                                                                                                                                                              |
| `date`     | Un oggetto `Date` a partire dal quale calcolare il tempo relativo. Se vengono forniti sia `date` sia `children`, `date` ha la precedenza.                                                                                                                                                                                                                               |
| `value`    | Un valore numerico esplicito per il tempo relativo (ad esempio `-1` per &quot;ieri&quot;). Deve essere usato insieme a `unit`.                                                                                                                                                                                                                                          |
| `unit`     | L&#39;unità di tempo (ad esempio `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`). Obbligatoria quando si usa `value`.                                                                                                                                                                                                                         |
| `baseDate` | La data di riferimento per calcolare il tempo relativo. Per impostazione predefinita è `new Date()` al momento del rendering. **Impostala esplicitamente per evitare errori di idratazione** — vedi [sotto](#avoiding-hydration-errors).                                                                                                                                |
| `options`  | Opzioni di formattazione facoltative che seguono la specifica [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). Per impostazione predefinita sono `numeric: 'auto'` e `style: 'long'`.                                                                                      |
| `locales`  | Impostazioni regionali facoltative per specificare l&#39;impostazione regionale usata per la formattazione. Se non vengono fornite, viene usata l&#39;impostazione regionale dell&#39;utente. Leggi di più su come specificare le impostazioni regionali [qui](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Restituisce

`JSX.Element` contenente il tempo relativo formattato come stringa, oppure `null` se non è stata fornita alcuna data o valore.

***

## Esempi

### Selezione automatica dell&#39;unità da un Date

Passa un `Date` come `children` e il componente seleziona automaticamente l&#39;unità più adatta.

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

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


### Uso della prop `date`

Puoi anche passare la data tramite la prop `date` invece di `children`.

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

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


### Valore e unità espliciti

Specifica un valore esatto e una unità, in linea con l&#39;API `Intl.RelativeTimeFormat`.

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

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."
}
```


### Specificare le impostazioni regionali

Mostra il tempo relativo in una specifica impostazione regionale.

```jsx title="FrenchTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function FrenchTimestamp({ date }) {
    return (
        <RelativeTime locales={['fr-FR']}>{date}</RelativeTime> // [!code highlight]
    );
    // Output: "il y a 2 heures"
}
```


### Tradurre RelativeTime

Racchiudi `<RelativeTime>` nel componente `<T>` per includerlo in una frase tradotta.

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

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


### Opzioni di formattazione personalizzate

Controlla lo stile dell&#39;output con le opzioni di `Intl.RelativeTimeFormat`.

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

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // Con numeric: 'always', restituisce "1 giorno fa" invece di "ieri"
}
```

***


## Evitare gli errori di idratazione

Poiché `<RelativeTime>` calcola il tempo relativo localmente, può produrre **output diversi sul server e sul client**. Quando React confronta l&#39;HTML generato sul server con il rendering lato client e i due non corrispondono, si verifica un errore di idratazione.

In genere questo accade quando:

* **Per impostazione predefinita, `baseDate` è `new Date()` al momento del rendering.** Il server esegue il rendering in un determinato momento, poi il client esegue l&#39;idratazione alcuni secondi (o più) dopo. Se il tempo relativo passa a un&#39;altra unità tra quei due momenti (ad esempio, &quot;59 seconds ago&quot; → &quot;1 minute ago&quot;), l&#39;output non corrisponderà.
* **L&#39;impostazione regionale predefinita è diversa nei vari ambienti.** Se l&#39;impostazione regionale predefinita del server non corrisponde a quella del client, la stringa formattata potrebbe essere diversa (ad esempio, &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Come risolvere

**Imposta un `baseDate` esplicito** per garantire che server e client calcolino lo stesso tempo relativo:

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

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>
```

**Specifica `locales` in modo esplicito** per evitare disallineamenti delle impostazioni regionali:

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

Fissando sia l&#39;impostazione regionale sia la data di riferimento, il server e il client produrranno sempre la stessa stringa formattata.


## Note

* Il componente `<RelativeTime>` è un componente variabile che formatta valori temporali relativi.
* Quando usi la modalità automatica (con un `Date`), il componente seleziona automaticamente l’unità più adatta.
* Il componente si basa su [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).
* Le opzioni di formattazione predefinite sono `numeric: 'auto'` e `style: 'long'`.

## Passaggi successivi

* Per maggiori dettagli ed esempi d&#39;uso del componente `<RelativeTime>` e di altri componenti variabili come `<DateTime>`, `<Currency>`, `<Num>` e `<Var>`, consulta la documentazione [Utilizzo dei componenti variabili](/docs/react-native/guides/variables).