Aperçu

Nouveau composant variable <RelativeTime> pour afficher des expressions de temps relatif localisées comme « il y a 2 heures » ou « dans 3 jours ». S’appuie sur Intl.RelativeTimeFormat en interne.

Utilisation

Sélection automatique de l’unité à partir d’une Date

Passez une Date et le composant détermine automatiquement l’unité la plus appropriée :

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "il y a 2 heures", "dans 3 jours", etc.

Valeur et unité explicites

Précisez une valeur et une unité exactes, comme dans l’API Intl.RelativeTimeFormat :

import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "dans 3 jours"

Dans les traductions

Entourez <RelativeTime> de <T> pour l’inclure dans des phrases traduites :

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

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

Sécurité de l’hydratation

<RelativeTime> calcule le temps relatif localement, ce qui peut entraîner des décalages d’hydratation dans les applications rendues côté serveur. Définissez baseDate pour éviter cela :

const now = new Date();

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

Utilitaires principaux

Deux nouvelles fonctions de formatage sont également disponibles depuis generaltranslation :

• formatRelativeTimeFromDate(date, options) — fonction autonome
• GT.formatRelativeTimeFromDate(date, options) — méthode de classe

Liens

• <RelativeTime> référence de l’API
• Utilisation des composants variables
• PR #1153