# gt-next: General Translation Next.js SDK: RelativeTime
URL: https://generaltranslation.com/es/docs/next/api/components/relativetime.mdx
---
title: RelativeTime
description: Referencia de la API del componente RelativeTime
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. En su lugar, edita el template en content/docs-templates/. */}


## Descripción general

El componente `<RelativeTime>` renderiza una cadena localizada de tiempo relativo, como &quot;hace 2 horas&quot; o &quot;dentro de 3 días&quot;.
Admite dos modos de uso: seleccionar automáticamente la unidad más adecuada a partir de un `Date`, o especificar explícitamente un valor y una unidad.

```jsx
<RelativeTime>{someDate}</RelativeTime>
// Salida: "hace 2 horas"
```

Todo el formato se gestiona localmente mediante la API [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

<Callout type="warn">
  `<RelativeTime>` puede causar **error de hidratación de React** en aplicaciones renderizadas en el servidor. Consulta [Cómo evitar el error de hidratación](#avoiding-hydration-errors) a continuación.
</Callout>

## Referencia

### Props

<TypeTable
  type={{
  "children?": {
      description: 'Un objeto Date desde el que se calcula el tiempo relativo.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Un objeto Date desde el que se calcula el tiempo relativo. Tiene prioridad sobre contenido.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valor numérico explícito para el tiempo relativo. Requiere unit.',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: 'La unidad de tiempo. Obligatoria cuando se usa value.',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Fecha base para calcular el tiempo relativo. De forma predeterminada, usa new Date() en el momento de renderizar.',
      type: 'Date',
      optional: true,
      default: 'new Date()',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.RelativeTimeFormatOptions',
      optional: true,
      default: "{ numeric: 'auto', style: 'long' }",
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Nombre de la prop | Descripción                                                                                                                                                                                                                                                                                                                                 |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`        | Un objeto `Date`. El componente selecciona automáticamente la mejor unidad (segundos, minutos, horas, días, semanas, meses o años) y formatea el tiempo relativo con respecto a `baseDate`.                                                                                                                                                 |
| `date`            | Un objeto `Date` a partir del cual calcular el tiempo relativo. Si se proporcionan `date` y `children`, `date` tiene prioridad.                                                                                                                                                                                                             |
| `value`           | Un valor numérico explícito para el tiempo relativo (por ejemplo, `-1` para &quot;ayer&quot;). Debe usarse junto con `unit`.                                                                                                                                                                                                                |
| `unit`            | La unidad de tiempo (por ejemplo, `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`). Es obligatoria cuando se usa `value`.                                                                                                                                                                                          |
| `baseDate`        | La fecha base para calcular el tiempo relativo. De forma predeterminada, es `new Date()` en el momento de renderizar. **Establécela explícitamente para evitar errores de hidratación**; consulta [abajo](#avoiding-hydration-errors).                                                                                                      |
| `options`         | Opciones de formato opcionales que siguen la especificación [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). De forma predeterminada, usa `numeric: 'auto'` y `style: 'long'`.                                                                 |
| `locales`         | Configuraciones regionales opcionales para especificar la configuración regional de formato. Si no se proporcionan, se usa la configuración regional del usuario. Lee más sobre cómo especificar configuraciones regionales [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene el tiempo relativo formateado como una cadena, o `null` si no se proporciona ninguna fecha ni ningún valor.

***

## Ejemplos

### Seleccionar automáticamente la unidad a partir de un `Date`

Pasa un `Date` como contenido y el componente elige automáticamente la unidad más adecuada.

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime>{post.createdAt}</RelativeTime> // [!code highlight]
    );
    // Salida: "hace 2 horas", "hace 3 días", "en 5 minutos", etc.
}
```


### Uso de la propiedad `date`

También puedes pasar la fecha mediante la propiedad `date` en lugar de `contenido`.

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime date={post.createdAt} /> // [!code highlight]
    );
}
```


### Valor y unidad explícitos

Especifica un valor exacto y una unidad, como en la API `Intl.RelativeTimeFormat`.

```jsx title="Reminder.jsx" copy
import { RelativeTime } from 'gt-next';

export default function Reminder() {
    return (
        <p>
            Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
        </p>
    );
    // Salida: "Tu prueba termina en 3 días."
}
```


### Especificar configuraciones regionales

Muestra el tiempo relativo en una configuración regional específica.

```jsx title="FrenchTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function FrenchTimestamp({ date }) {
    return (
        <RelativeTime locales={['fr-FR']}>{date}</RelativeTime> // [!code highlight]
    );
    // Salida: "il y a 2 heures"
}
```


### Traducir RelativeTime

Envuelve `<RelativeTime>` en el componente `<T>` para incluirlo en una frase traducida.

```jsx title="Comment.jsx" copy
import { T, RelativeTime } from 'gt-next';

export default function Comment({ comment }) {
    return (
        <T id="commentPosted">
            Posted <RelativeTime>{comment.createdAt}</RelativeTime> // [!code highlight]
        </T>
    );
}
```


### Opciones de formato personalizadas

Controla el formato de salida con las opciones de `Intl.RelativeTimeFormat`.

```jsx title="NumericTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // Con numeric: 'always', muestra "1 day ago" en vez de "yesterday"
}
```

***


## Cómo evitar errores de hidratación

Como `<RelativeTime>` calcula el tiempo relativo localmente, puede producir **resultados distintos en el servidor y en el cliente**. Cuando React compara el HTML renderizado en el servidor con el renderizado en el cliente y no coinciden, se produce un error de hidratación.

Esto suele ocurrir cuando:

* **`baseDate` usa `new Date()` de forma predeterminada en el momento de renderizar.** El servidor renderiza en un momento, y luego el cliente se hidrata segundos (o más) después. Si el tiempo relativo pasa de una unidad a otra entre esos dos momentos (p. ej., &quot;hace 59 segundos&quot; → &quot;hace 1 minuto&quot;), el resultado no coincidirá.
* **La configuración regional predeterminada difiere entre entornos.** Si la configuración regional predeterminada del servidor no coincide con la del cliente, la cadena con formato puede variar (p. ej., &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Cómo solucionarlo

**Define una `baseDate` explícita** para garantizar que el servidor y el cliente calculen el mismo tiempo relativo:

```jsx
const now = new Date(); // calculado una vez, pasado tanto al servidor como al cliente

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

**Especifica `locales` de forma explícita** para evitar desajustes de configuración regional:

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

Al fijar tanto la configuración regional como la fecha base, el servidor y el cliente siempre producirán la misma cadena formateada.


## Notas

* El componente `<RelativeTime>` es un componente variable que da formato a valores de tiempo relativo.
* Al usar el modo automático (con un `Date`), el componente selecciona la unidad más adecuada automáticamente.
* El componente usa [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) internamente.
* Las opciones de formato predeterminadas son `numeric: 'auto'` y `style: 'long'`.

## Próximos pasos

* Para ver más detalles y ejemplos de uso del componente `<RelativeTime>` y de otros componentes de variable como `<DateTime>`, `<Currency>`, `<Num>` y `<Var>`, consulta la documentación [Uso de componentes de variable](/docs/next/guides/variables).