戻る

gt-next@6.15.0

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

概要

新しい <RelativeTime> コンポーネントが、すべての GT React パッケージで利用できるようになりました。ブラウザーに組み込まれている Intl.RelativeTimeFormat API を使用して、"2 hours ago" や "in 3 days" のようなローカライズされた相対時間文字列をレンダリングします。

パッケージバージョンエクスポート
gt-next6.15.0<RelativeTime> (クライアント + サーバー)
gt-react10.16.0<RelativeTime> (クライアント)
gt-tanstack-start0.3.0<RelativeTime> (クライアント)
generaltranslation8.2.0formatRelativeTimeFromDate() (コア)
gt (CLI)2.14.0RelativeTime コンポーネントの検出

使い方

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>

リンク