# General Translation Changelog: gt-next 6.15.0: `<RelativeTime>` en todos los paquetes React
URL: https://generaltranslation.com/es/blog/gt-next_v6_15_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Archie McKenzie
Published: 2026-04-01

## Descripción general

Un nuevo componente [`<RelativeTime>`](/docs/react/reference/components/relative-time) ya está disponible en todos los paquetes React de GT. Renderiza cadenas localizadas de tiempo relativo, como &quot;hace 2 horas&quot; o &quot;en 3 días&quot;, mediante la API nativa del navegador `Intl.RelativeTimeFormat`.

| Paquete              | Versión | Exportación                                                                                                                          |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `gt-next`            | 6.15.0  | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (cliente + servidor)                                              |
| `gt-react`           | 10.16.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (cliente)                                                         |
| `gt-tanstack-start`  | 0.3.0   | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (cliente)                                                         |
| `generaltranslation` | 8.2.0   | [`formatRelativeTimeFromDate()`](/docs/platform/core/reference/utility-functions/formatting/format-relative-time-from-date) (núcleo) |
| `gt` (CLI)           | 2.14.0  | detección del componente [`RelativeTime`](/docs/react/reference/components/relative-time)                                            |

## 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).

```tsx
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`.

```tsx
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>`](/docs/react/reference/components/relative-time) en un componente [`<T>`](/docs/react/reference/components/t) para incluirlo en frases traducidas.

```tsx
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:

```ts
import { formatRelativeTimeFromDate } from 'generaltranslation';

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


## Seguridad de la hidratación

[`<RelativeTime>`](/docs/react/reference/components/relative-time) 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:

```tsx
const now = new Date();

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

## Enlaces

* [PR #1153 — feat: añade el componente `<RelativeTime>`](https://github.com/generaltranslation/gt/pull/1153)
* [Documentación de `<RelativeTime>`](/docs/react/reference/components/relative-time)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.