# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<RelativeTime>`
URL: https://generaltranslation.com/es/docs/react/reference/components/relative-time.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Da formato a un tiempo relativo localizado, como hace 2 horas. Referencia de la API del componente `<RelativeTime>`.

El componente `<RelativeTime>` muestra expresiones de tiempo relativo con las convenciones de unidad y redacción de la configuración regional activa. Funciona seleccionando automáticamente la unidad más adecuada a partir de un `Date` o a partir de un valor y una unidad explícitos.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`.*

## Descripción general [#overview]

Pasa una `Date` como `children` y `<RelativeTime>` selecciona la unidad más adecuada y formatea el tiempo en relación con `baseDate`.

```tsx
<RelativeTime>{someDate}</RelativeTime>
// Salida: "2 hours ago"
```

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

*Nota: `<RelativeTime>` puede causar errores de hidratación de React en aplicaciones renderizadas en el servidor. Consulta [Cómo evitar errores de hidratación](#hydration).*

## Cómo funciona [#how-it-works]

* **Dos modos.** Proporciona un `Date` (mediante `children` o `date`) y el componente seleccionará automáticamente la unidad más adecuada en función de `baseDate`, o bien proporciona un `value` y una `unit` explícitos, igual que en `Intl.RelativeTimeFormat`.
* **Formato local.** El tiempo relativo se calcula y se formatea en el navegador; el valor nunca se envía a la API de General Translation.
* **No renderiza nada sin datos de entrada.** Si no se proporciona ni una fecha ni un valor, el componente renderiza `null`.

## Props [#props]

| Prop                     | Descripción                                                             | Type                             | Opcional | Predeterminado                       |
| ------------------------ | ----------------------------------------------------------------------- | -------------------------------- | -------- | ------------------------------------ |
| [`children`](#children)  | Un `Date` a partir del cual calcular el tiempo relativo.                | `Date`                           | Sí       | —                                    |
| [`date`](#date)          | Un `Date` a partir del cual calcular. Tiene prioridad sobre `children`. | `Date`                           | Sí       | —                                    |
| [`value`](#value)        | Cantidad numérica explícita. Requiere `unit`.                           | `number`                         | Sí       | —                                    |
| [`unit`](#unit)          | Unidad de tiempo, usada con `value`.                                    | `Intl.RelativeTimeFormatUnit`    | Sí       | —                                    |
| [`baseDate`](#base-date) | Fecha de referencia.                                                    | `Date`                           | Sí       | `new Date()`                         |
| [`options`](#options)    | Opciones de `Intl.RelativeTimeFormat`.                                  | `Intl.RelativeTimeFormatOptions` | Sí       | `{ numeric: 'auto', style: 'long' }` |
| [`locales`](#locales)    | Configuración regional que reemplaza la usada para el formato.          | `string[]`                       | Sí       | Configuración regional activa        |
| [`name`](#name)          | Nombre de la variable de la entrada.                                    | `string`                         | Sí       | —                                    |

### `children` [#children]

**Tipo** `Date` · **Opcional**

Un objeto `Date`. El componente selecciona automáticamente la unidad más adecuada (de segundos a años) y da formato al tiempo relativo a `baseDate`.

### `date` [#date]

**Tipo** `Date` · **Opcional**

Una `Date` a partir de la cual calcular el tiempo relativo. Cuando se proporcionan tanto `date` como `children`, `date` tiene prioridad.

### `value` [#value]

**Tipo** `number` · **Opcional**

Un valor numérico explícito para el tiempo relativo (por ejemplo, `-1` para &quot;ayer&quot;). Debe usarse junto con `unit`.

### `unit` [#unit]

**Tipo** `Intl.RelativeTimeFormatUnit` · **Opcional**

La unidad de tiempo, como `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'` o `'year'`. Es obligatorio al usar `value`.

### `baseDate` [#base-date]

**Tipo** `Date` · **Opcional** · **Predeterminado** `new Date()`

La fecha base con respecto a la que se mide el tiempo relativo. De forma predeterminada, es `new Date()` en el momento del render. Establécela explícitamente para evitar errores de hidratación; consulta [más abajo](#hydration).

### `options` [#options]

**Tipo** `Intl.RelativeTimeFormatOptions` · **Opcional** · **Predeterminado** `{ numeric: 'auto', style: 'long' }`

La prop usa [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options). Actualmente, `<RelativeTime>` admite estas opciones:

| Opción          | Descripción                                                                                                       | Tipo                            | Opcional | Predeterminado |
| --------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------- | -------------- |
| `localeMatcher` | Algoritmo de coincidencia de configuración regional.                                                              | `'lookup' \| 'best fit'`        | Sí       | `'best fit'`   |
| `style`         | Longitud de la expresión de tiempo relativo.                                                                      | `'long' \| 'short' \| 'narrow'` | Sí       | `'long'`       |
| `numeric`       | Indica si se debe usar siempre un número o si se permiten expresiones como &quot;ayer&quot; y &quot;mañana&quot;. | `'always' \| 'auto'`            | Sí       | `'auto'`       |

Otros campos del tipo TypeScript más amplio `Intl.RelativeTimeFormatOptions` no se transfieren a `<RelativeTime>`.

Consulta la [documentación sobre las opciones de `Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options) para conocer las opciones estándar más recientes. Consulta la tabla anterior para ver las opciones que `<RelativeTime>` admite actualmente.

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Configuración regional activa

Locales a los que se les aplicará formato. Cuando se omite, se usa la configuración regional activa. Consulta el [argumento `locales`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Tipo** `string` · **Opcional**

Un nombre opcional para la entrada, utilizado como metadatos.

## Ejemplos [#examples]

*Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

```tsx title="PostTimestamp.tsx"
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.
}
```

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

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

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

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
    </p>
  );
  // Salida: "Your trial ends in 3 days."
}
```

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

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

```tsx title="NumericTimestamp.tsx"
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 [#hydration]

Como `<RelativeTime>` calcula el tiempo relativo localmente, puede generar una salida distinta en el servidor y en el cliente, lo que provoca un error de hidratación. Esto suele ocurrir cuando:

* **`baseDate` usa `new Date()` de forma predeterminada en el momento de renderizar.** El servidor y el cliente renderizan en momentos ligeramente distintos. Si el tiempo relativo cruza un límite de unidad entre ambos (por ejemplo, &quot;hace 59 segundos&quot; → &quot;hace 1 minuto&quot;), la salida no coincidirá.
* **La configuración regional predeterminada es distinta entre entornos**, lo que produce cadenas diferentes (por ejemplo, &quot;hace 2 horas&quot; frente a &quot;2 hours ago&quot;).

Fija tanto la configuración regional como un `baseDate` compartido para que el servidor y el cliente siempre generen la misma cadena:

```tsx
const now = new Date(); // se calcula una vez y se pasa tanto al servidor como al cliente

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

## Sitemap

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