# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/it/docs/react/reference/components/relative-time.mdx Docs index: https://generaltranslation.com/llms.txt Description: Formatta il tempo relativo localizzato, ad esempio 2 ore fa. Riferimento API per il componente ``. Il componente `` renderizza la formulazione del tempo relativo con le convenzioni di unità e di espressione dell'impostazione regionale attiva. Funziona selezionando automaticamente l'unità più adatta a partire da un `Date` oppure da un valore e un'unità espliciti. *Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`.* ## Panoramica [#overview] Passa un `Date` come contenuto figlio e `` seleziona automaticamente l'unità più adatta e formatta il tempo relativo rispetto a `baseDate`. ```tsx {someDate} // 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: `` 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'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'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'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'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 "ieri"). Deve essere utilizzato insieme a `unit`. ### `unit` [#unit] **Type** `Intl.RelativeTimeFormatUnit` · **Facoltativo** L'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] **Tipo** `Intl.RelativeTimeFormatOptions` · **Facoltativo** · **Predefinito** `{ numeric: 'auto', style: 'long' }` La prop usa [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options). Attualmente, `` legge queste opzioni: | Opzione | Descrizione | Tipo | Facoltativo | Predefinito | | --------------- | ---------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | ------------ | | `localeMatcher` | Algoritmo di corrispondenza delle impostazioni regionali. | `'lookup' \| 'best fit'` | Sì | `'best fit'` | | `style` | Lunghezza delle espressioni di tempo relativo. | `'long' \| 'short' \| 'narrow'` | Sì | `'long'` | | `numeric` | Se usare sempre un numero o consentire espressioni come "ieri" e "domani". | `'always' \| 'auto'` | Sì | `'auto'` | Gli altri campi del tipo TypeScript più ampio `Intl.RelativeTimeFormatOptions` non vengono passati a ``. Consulta la [documentazione delle opzioni di `Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options) per le opzioni standard più recenti. Per le opzioni attualmente supportate da ``, consulta la tabella precedente. ### `locales` [#locales] **Tipo** `string[]` · **Facoltativo** · **Predefinito** Impostazione regionale attiva Le impostazioni regionali da usare per la formattazione. Se omesso, viene usata l'impostazione regionale attiva. Consulta l'[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] *Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.* ```tsx title="PostTimestamp.tsx" import { RelativeTime } from 'gt-react'; export default function PostTimestamp({ post }) { return {post.createdAt}; // [!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 ; // [!code highlight] } ``` ```tsx title="Reminder.tsx" import { RelativeTime } from 'gt-react'; export default function Reminder() { return (

Your trial ends . // [!code highlight]

); // Output: "La tua prova termina tra 3 giorni." } ``` ```tsx title="Comment.tsx" import { T, RelativeTime } from 'gt-react'; export default function Comment({ comment }) { return ( Posted {comment.createdAt} // [!code highlight] ); } ``` ```tsx title="NumericTimestamp.tsx" import { RelativeTime } from 'gt-react'; export default function NumericTimestamp({ date }) { return ( {date} ); // Con numeric: 'always', restituisce "1 day ago" anziché "yesterday" } ``` ## Evitare gli errori di idratazione [#hydration] Poiché `` 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'unità all'altra (ad esempio, "59 secondi fa" → "1 minuto fa"), l'output non corrisponderà. * **L'impostazione regionale predefinita è diversa nei vari ambienti**, producendo stringhe diverse (ad esempio, "hace 2 horas" vs. "2 hours ago"). Blocca sia l'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 {post.createdAt} ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.