Обзор

Новый переменный компонент <RelativeTime> для отображения локализованных строк относительного времени, таких как «2 часа назад» или «через 3 дня». Внутри использует Intl.RelativeTimeFormat.

Использование

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

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

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "2 часа назад", "через 3 дня" и т.д.

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

Укажите точное значение и единицу времени по аналогии с API Intl.RelativeTimeFormat:

import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "через 3 дня"

Внутри переводимых строк

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

import { T, RelativeTime } from "gt-react";

<T id="commentPosted">
  Posted <RelativeTime>{comment.createdAt}</RelativeTime>
</T>

Безопасность гидратации

<RelativeTime> вычисляет относительное время локально, из-за чего в приложениях с серверным рендерингом возможны несовпадения при гидратации. Чтобы этого избежать, зафиксируйте baseDate:

const now = new Date();

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

Основные утилиты

В generaltranslation также доступны две новые функции форматирования:

• formatRelativeTimeFromDate(date, options) — автономная функция
• GT.formatRelativeTimeFromDate(date, options) — метод класса

Ссылки

• Справка по API <RelativeTime>
• Использование переменных компонентов
• PR #1153