概要

"2時間前" や "3日後" のようなローカライズされた相対時間文字列を renderizar するための新しい <RelativeTime> 変数コンポーネントです。内部では Intl.RelativeTimeFormat を使用します。

使い方

Dateから単位を自動で選択

Date を渡すと、コンポーネントが最適な単位を自動で選択します。

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "2時間前"、"3日後" など

明示的な値と単位

Intl.RelativeTimeFormat API に合わせて、値と単位を明示的に指定します。

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> は相対時間をローカルで計算するため、server-rendered アプリではハイドレーションの不整合が発生することがあります。これを避けるには、baseDate を固定してください。

const now = new Date();

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

コアユーティリティ

generaltranslation では、2 つの新しい書式設定関数も利用できます。

• formatRelativeTimeFromDate(date, options) — スタンドアロン関数
• GT.formatRelativeTimeFromDate(date, options) — クラスメソッド

リンク

• <RelativeTime> API リファレンス
• 変数コンポーネントを使う
• PR #1153