Descripción general

Nuevo componente de variable <RelativeTime> para renderizar expresiones de tiempo relativo localizadas como "hace 2 horas" o "en 3 días". Usa Intl.RelativeTimeFormat internamente.

Uso

Seleccionar automáticamente la unidad a partir de una Date

Pasa una Date y el componente elige automáticamente la unidad más adecuada:

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "hace 2 horas", "en 3 días", etc.

Valor y unidad explícitos

Especifica un valor exacto y una unidad, siguiendo la API de Intl.RelativeTimeFormat:

import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "en 3 días"

Dentro de las cadenas traducidas

Envuelve <RelativeTime> en <T> para incluirlo en frases traducidas:

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

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

Seguridad en la hidratación

<RelativeTime> calcula el tiempo relativo localmente, lo que puede provocar desajustes durante la hidratación en aplicaciones renderizadas en el servidor. Fija baseDate para evitarlo:

const now = new Date();

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

Utilidades principales

También están disponibles en generaltranslation dos nuevas funciones de formato:

• formatRelativeTimeFromDate(date, options) — función autónoma
• GT.formatRelativeTimeFromDate(date, options) — método de clase

Enlaces

• <RelativeTime> referencia de la API
• Uso de los componentes de variable
• PR #1153