Volver

gt-next@6.15.0

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

Descripción general

Un nuevo componente <RelativeTime> ya está disponible en todos los paquetes React de GT. Renderiza cadenas localizadas de tiempo relativo, como "hace 2 horas" o "en 3 días", mediante la API nativa del navegador Intl.RelativeTimeFormat.

PaqueteVersiónExportación
gt-next6.15.0<RelativeTime> (cliente + servidor)
gt-react10.16.0<RelativeTime> (cliente)
gt-tanstack-start0.3.0<RelativeTime> (cliente)
generaltranslation8.2.0formatRelativeTimeFromDate() (núcleo)
gt (CLI)2.14.0detección del componente RelativeTime

Uso

Seleccionar automáticamente la unidad a partir de una Date

Pasa una Date y el componente selecciona automáticamente la unidad más adecuada (segundos, minutos, horas, días, semanas, meses o años).

import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "hace 2 horas", "hace 3 días", "en 5 minutos", etc.
}

Valor y unidad explícitos

Especifica un valor exacto y la unidad correspondiente, tal como en Intl.RelativeTimeFormat.

import { RelativeTime } from 'gt-next';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "Tu período de prueba termina en 3 días."
}

Dentro del contenido traducido

Envuelve <RelativeTime> en un componente <T> para incluirlo en frases traducidas.

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

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

Función principal

En contextos sin componentes, usa la función autónoma:

import { formatRelativeTimeFromDate } from 'generaltranslation';

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

Seguridad de la hidratación

<RelativeTime> calcula el tiempo relativo localmente, lo que puede provocar desajustes de hidratación en aplicaciones renderizadas en el servidor. Fija baseDate y locales para mantener el servidor y el cliente sincronizados:

const now = new Date();

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

Enlaces