# gt-react: General Translation React SDK: RelativeTime
URL: https://generaltranslation.com/ru/docs/react/api/components/relativetime.mdx
---
title: RelativeTime
description: Справка API для компонента RelativeTime
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого изменяйте template в content/docs-templates/. */}


## Обзор

Компонент `<RelativeTime>` отображает локализованную строку относительного времени, например &quot;2 часа назад&quot; или &quot;через 3 дня&quot;.
Он поддерживает два режима использования: автоматический выбор наиболее подходящей единицы времени на основе `Date` или явное указание значения и единицы времени.

```jsx
<RelativeTime>{someDate}</RelativeTime>
// Вывод: "2 hours ago"
```

Все операции форматирования выполняются локально с помощью API [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

<Callout type="warn">
  `<RelativeTime>` может вызывать **ошибки гидратации React** в приложениях с серверным рендерингом. См. [Как избежать ошибок гидратации](#avoiding-hydration-errors) ниже.
</Callout>


## Справка

### Пропсы

<TypeTable
  type={{
  "children?": {
      description: 'Объект Date, относительно которого вычисляется относительное время.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Объект Date, относительно которого вычисляется относительное время. Имеет приоритет перед children.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Явно заданное числовое значение относительного времени. Требует указания единицы времени.',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: 'Единица времени. Обязательно при использовании value.',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Базовая дата для вычисления относительного времени. По умолчанию используется new Date() на момент рендеринга.',
      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',
  },
}}
/>

### Описание

| Имя свойства | Описание                                                                                                                                                                                                                                                                             |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`   | Объект `Date`. Компонент автоматически выбирает наиболее подходящую единицу времени (секунды, минуты, часы, дни, недели, месяцы или годы) и форматирует время относительно `baseDate`.                                                                                               |
| `date`       | Объект `Date`, от которого вычисляется относительное время. Если указаны и `date`, и `children`, приоритет отдаётся `date`.                                                                                                                                                          |
| `value`      | Явно заданное числовое значение относительного времени (например, `-1` для &quot;вчера&quot;). Должно использоваться вместе с `unit`.                                                                                                                                                |
| `unit`       | Единица времени (например, `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`). Обязательна при использовании `value`.                                                                                                                                         |
| `baseDate`   | Базовая дата для вычисления относительного времени. По умолчанию используется `new Date()` на момент рендеринга. **Укажите это значение явно, чтобы избежать ошибок гидратации** — см. [ниже](#avoiding-hydration-errors).                                                           |
| `options`    | Необязательные параметры форматирования в соответствии со спецификацией [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). По умолчанию используются `numeric: 'auto'` и `style: 'long'`. |
| `locales`    | Необязательный параметр `locales`, задающий локаль форматирования. Если он не указан, используется локаль пользователя. Подробнее о том, как задавать локали, см. [здесь](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).   |

### Возвращает

`JSX.Element`, содержащий строку с относительным временем в нужном формате, или `null`, если дата или значение не указаны.

***

## Примеры

### Автоматический выбор единицы времени по Date

Передайте `Date` как дочерний элемент, и компонент автоматически выберет наиболее подходящую единицу времени.

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

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime>{post.createdAt}</RelativeTime> // [!code highlight]
    );
    // Вывод: "2 часа назад", "3 дня назад", "через 5 минут" и т.д.
}
```


### Использование свойства `date`

Вы также можете передать дату через свойство `date`, а не через `children`.

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

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


### Явное значение и единица времени

Укажите точное значение и единицу времени по аналогии с 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>
    );
    // Вывод: "Your trial ends in 3 days."
}
```


### Выбор локали

Отображайте относительное время для определённой локали.

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

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


### Перевод компонента RelativeTime

Оберните `<RelativeTime>` в компонент `<T>`, чтобы включить его в переводимое предложение.

```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>
    );
}
```


### Настраиваемые параметры форматирования

Настройте стиль вывода с помощью параметров `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>
    );
    // При numeric: 'always' выводит "1 day ago" вместо "yesterday"
}
```

***


## Как избежать ошибок гидратации

Поскольку `<RelativeTime>` вычисляет относительное время локально, он может давать **разный результат на сервере и на клиенте**. Когда React сравнивает HTML, сгенерированный на сервере, с результатом рендеринга на клиенте и они не совпадают, возникает ошибка гидратации.

Обычно это происходит, когда:

* **`baseDate` по умолчанию получает значение `new Date()` во время рендеринга.** Сервер рендерит в один момент времени, а клиент гидратируется через несколько секунд (или позже). Если за это время относительное время переходит к следующей единице времени (например, &quot;59 seconds ago&quot; → &quot;1 minute ago&quot;), результаты не совпадут.
* **Локаль по умолчанию различается в разных средах.** Если локаль по умолчанию на сервере не совпадает с локалью клиента, отформатированная строка может отличаться (например, &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Как это исправить

**Задайте явный `baseDate`**, чтобы сервер и клиент вычисляли одинаковое относительное время:

```jsx
const now = new Date(); // вычисляется один раз, передаётся и на сервер, и на клиент

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

**Явно укажите `locales`**, чтобы избежать несовпадения локалей:

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

Закрепив и локаль, и базовую дату, вы обеспечите, что сервер и клиент всегда будут выдавать одну и ту же отформатированную строку.


## Примечания

* `<RelativeTime>` — это переменный компонент для форматирования относительного времени.
* В автоматическом режиме (с `Date`) компонент сам выбирает наиболее подходящую единицу времени.
* В основе компонента лежит [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).
* По умолчанию используются параметры форматирования `numeric: 'auto'` и `style: 'long'`.

## Дальнейшие шаги

* Подробнее о компоненте `<RelativeTime>` и примеры использования других переменных компонентов, таких как `<DateTime>`, `<Currency>`, `<Num>` и `<Var>`, см. в документации [Использование переменных компонентов](/docs/react/guides/variables).