# gt-react: General Translation React SDK: RelativeTime
URL: https://generaltranslation.com/es/docs/react/api/components/relativetime.mdx
---
title: RelativeTime
description: Referencia de la API para el componente RelativeTime
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto 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;en 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 procesa 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 provocar **errores de hidratación** en aplicaciones **renderizadas en el servidor**. Consulta [Cómo evitar los errores de hidratación](#avoiding-hydration-errors) más abajo.
</Callout>


## Referencia

### Props

<TypeTable
  type={{
  "children?": {
      description: 'Un objeto Date a partir del cual calcular el tiempo relativo.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Un objeto Date a partir del cual calcular el tiempo relativo. Tiene prioridad sobre children.',
      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 al usar value.',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Fecha base para calcular el tiempo relativo. De forma predeterminada, se 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 propiedad | Descripción                                                                                                                                                                                                                                                                                                                              |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`             | Un objeto `Date`. El componente selecciona automáticamente la unidad más adecuada (segundos, minutos, horas, días, semanas, meses o años) y formatea el tiempo en relación con `baseDate`.                                                                                                                                               |
| `date`                 | Un objeto `Date` a partir del cual calcular el tiempo relativo. Si se proporcionan tanto `date` como `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 [más 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. Obtén más información sobre cómo especificar `locales` [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene el tiempo relativo con formato como cadena, o `null` si no se proporciona ninguna fecha ni 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-react';

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 con la propiedad `date` en lugar del `contenido`.

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

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


### Valor y unidad explícitos

Especifica un valor y una unidad exactos, igual que en la API `Intl.RelativeTimeFormat`.

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

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-react';

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


### Traducir RelativeTime

Envuelve `<RelativeTime>` con un componente `<T>` para incluirlo en una oración traducida.

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

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


### Opciones de formato personalizadas

Controla el estilo de salida mediante las opciones de `Intl.RelativeTimeFormat`.

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

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // Con numeric: 'always', produce "1 day ago" en lugar 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 generado en el servidor con lo que renderiza 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 determinado y, segundos después (o más), el cliente se hidrata. Si el tiempo relativo cruza el límite de una unidad entre esos dos momentos (por ejemplo, &quot;hace 59 segundos&quot; → &quot;hace 1 minuto&quot;), el resultado no coincidirá.
* **La configuración regional predeterminada es distinta en cada entorno.** Si la configuración regional predeterminada del servidor no coincide con la del cliente, la cadena con formato puede variar (por ejemplo, &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Cómo solucionarlo

**Establece un `baseDate` explícito** 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 incompatibilidades 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 de variable que aplica formato a valores de tiempo relativo.
* Al usar el modo automático (con un `Date`), el componente selecciona automáticamente la unidad más adecuada.
* 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 obtener más información 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 los componentes de variable](/docs/react/guides/variables).