Retour

gt-next@6.15.0

Archie McKenzie avatarArchie McKenzie
gt-nextgt-reactgt-tanstack-startrelative-timecomposants

Vue d’ensemble

Un nouveau composant <RelativeTime> est désormais disponible dans tous les packages React de GT. Il affiche des expressions de temps relatif localisées, comme « il y a 2 heures » ou « dans 3 jours », à l’aide de l’API Intl.RelativeTimeFormat intégrée au navigateur.

PackageVersionExport
gt-next6.15.0<RelativeTime> (client + serveur)
gt-react10.16.0<RelativeTime> (client)
gt-tanstack-start0.3.0<RelativeTime> (client)
generaltranslation8.2.0formatRelativeTimeFromDate() (core)
gt (CLI)2.14.0détection du composant RelativeTime

Utilisation

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

Passez une Date et le composant sélectionne automatiquement l’unité la plus appropriée (secondes, minutes, heures, jours, semaines, mois ou années).

import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "il y a 2 heures", "il y a 3 jours", "dans 5 minutes", etc.
}

Valeur et unité explicites

Spécifiez une valeur et une unité exactes, comme dans Intl.RelativeTimeFormat.

import { RelativeTime } from 'gt-next';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "Votre essai se termine dans 3 jours."
}

Dans le contenu traduit

Encapsulez <RelativeTime> dans un composant <T> pour l’inclure dans des phrases traduites.

import { T, RelativeTime } from 'gt-next';

export default function Comment({ comment }) {
  return (
    <T id="commentPosted">
      Posted <RelativeTime>{comment.createdAt}</RelativeTime>
    </T>
  );
}

Fonction principale

En dehors des composants, utilisez la fonction autonome :

import { formatRelativeTimeFromDate } from 'generaltranslation';

const label = formatRelativeTimeFromDate(someDate, {
  locales: ['en-US'],
  baseDate: new Date(),
});
// "il y a 2 heures"

Sécurité de l’hydratation

<RelativeTime> calcule le temps relatif localement, ce qui peut provoquer des incohérences d’hydratation dans les applications rendues côté serveur. Fixez baseDate et locales pour garder le serveur et le client synchronisés :

const now = new Date();

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

Liens