Panoramica

Nuovo componente variabile <RelativeTime> per eseguire il rendering di stringhe di tempo relativo localizzate, come "2 ore fa" o "tra 3 giorni". Usa Intl.RelativeTimeFormat internamente.

Utilizzo

Seleziona automaticamente l'unità da un oggetto Date

Passa un oggetto Date e il componente seleziona automaticamente l'unità più adatta:

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "2 ore fa", "tra 3 giorni", ecc.

Valore e unità espliciti

Specifica un valore e un'unità precisi, come nell'API Intl.RelativeTimeFormat:

import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "tra 3 giorni"

Nelle traduzioni

Racchiudi <RelativeTime> in <T> per includerlo nelle frasi tradotte:

import { T, RelativeTime } from "gt-react";

<T id="commentPosted">
  Posted <RelativeTime>{comment.createdAt}</RelativeTime>
</T>

Sicurezza in fase di idratazione

<RelativeTime> calcola il tempo relativo localmente, il che può causare errori di idratazione nelle app con rendering lato server. Per evitarli, fissa baseDate:

const now = new Date();

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

Utilità principali

Sono disponibili anche due nuove funzioni di formattazione in generaltranslation:

• formatRelativeTimeFromDate(date, options) — funzione autonoma
• GT.formatRelativeTimeFromDate(date, options) — metodo della classe

Link

• <RelativeTime> riferimento API
• Uso dei componenti variabili
• PR #1153