Назад

gt-next@6.15.0

Archie McKenzie avatarArchie McKenzie
gt-nextgt-reactgt-tanstack-startrelative-timecomponents

Обзор

Новый компонент <RelativeTime> теперь доступен во всех React-пакетах GT. Он отображает локализованные значения относительного времени, например "2 часа назад" или "через 3 дня", с помощью встроенного браузерного API Intl.RelativeTimeFormat.

ПакетВерсияЭкспорт
gt-next6.15.0<RelativeTime> (клиент + сервер)
gt-react10.16.0<RelativeTime> (клиент)
gt-tanstack-start0.3.0<RelativeTime> (клиент)
generaltranslation8.2.0formatRelativeTimeFromDate() (ядро)
gt (CLI)2.14.0обнаружение компонента RelativeTime

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

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

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

import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "2 часа назад", "3 дня назад", "через 5 минут" и т. д.
}

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

Укажите точное значение и единицу времени — в точности как в Intl.RelativeTimeFormat.

import { RelativeTime } from 'gt-next';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "Ваш пробный период заканчивается через 3 дня."
}

Внутри переводимого содержимого

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

import { T, RelativeTime } from 'gt-next';

export default function Comment({ comment }) {
  return (
    <T id="commentPosted">
      Posted <RelativeTime>{comment.createdAt}</RelativeTime>
    </T>
  );
}

Основная функция

Вне компонентов используйте автономную функцию:

import { formatRelativeTimeFromDate } from 'generaltranslation';

const label = formatRelativeTimeFromDate(someDate, {
  locales: ['en-US'],
  baseDate: new Date(),
});
// "2 часа назад"

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

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

const now = new Date();

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

Ссылки