简体中文

useTimeAgo

Tags:

Utilities

Pausable

一个 React Hook，可帮助将日期格式化为易读的多久之前字符串。默认情况下，它会每 30 秒自动更新一次这个多久之前的字符串。

演示

源码

EN Result 1:

2 years ago

EN Result 2:

3 months ago

EN Result 3:

4 days ago

EN Result 4:

5 hours ago

EN Result 5:

6 minutes ago

EN Result 6:

just now

EN Result 7:

in 6 minutes

EN Result 8:

in 5 hours

EN Result 9:

in 4 days

EN Result 10:

in 3 months

EN Result 11:

in 2 years

CN Result 1:

2 年前

CN Result 2:

3 个月前

CN Result 3:

4 天前

CN Result 4:

5 小时前

CN Result 5:

6 分钟前

CN Result 6:

刚刚

CN Result 7:

6 分钟后

CN Result 8:

5 小时后

CN Result 9:

4 天后

CN Result 10:

3 个月后

CN Result 11:

2 年后

CN Traditional Result 1:

2 年前

CN Traditional Result 2:

3 個月前

CN Traditional Result 3:

4 天前

CN Traditional Result 4:

5 小時前

CN Traditional Result 5:

6 分鐘前

CN Traditional Result 6:

剛剛

CN Traditional Result 7:

6 分鐘後

CN Traditional Result 8:

5 小時後

CN Traditional Result 9:

4 天後

CN Traditional Result 10:

3 個月後

CN Traditional Result 11:

2 年後

JP Result 1:

2 年前

JP Result 2:

3 ヶ月前

JP Result 3:

4 日前

JP Result 4:

5 時間前

JP Result 5:

6 分前

JP Result 6:

たった今

JP Result 7:

6 分後

JP Result 8:

5 時間後

JP Result 9:

4 日後

JP Result 10:

3 ヶ月後

JP Result 11:

2 年後

用法

const timeAgo = useTimeAgo(dateLike, options)

const targetDate = new Date() - 1000 * 60 * 60 * 24 // 昨天

const timeAgo = useTimeAgo(targetDate) 
console.log(timeAgo) // "yesterday"

// 自定义语言，这里使用简体中文
import { CHINESE_MESSAGES } from '@shined/react-use'
const timeAgoInChinese = useTimeAgo(targetDate, { messages: CHINESE_MESSAGES }) 
console.log(timeAgoInChinese) // "昨天"

目前内置了简体中文、繁体中文、英文、日文四种语言，如果需要，可以通过 options.messages 进行自定义，以下是一个简单的例子，使用中文进行格式化：

/**
 * Default messages for Chinese Simplified language
 */
export const CHINESE_MESSAGES: TimeAgoMessages<TimeAgoUnitNamesDefault> = {
  justNow: '刚刚',
  past: (n) => (n.match(/\d/) ? `${n}前` : n),
  future: (n) => (n.match(/\d/) ? `${n}后` : n),
  month: (n, past) => (n === 1 ? (past ? '上个月' : '下个月') : `${n} 个月`),
  year: (n, past) => (n === 1 ? (past ? '去年' : '明年') : `${n} 年`),
  day: (n, past) => (n === 1 ? (past ? '昨天' : '明天') : `${n} 天`),
  week: (n, past) => (n === 1 ? (past ? '上周' : '下周') : `${n} 周`),
  hour: (n) => `${n} 小时`,
  minute: (n) => `${n} 分钟`,
  second: (n) => `${n} 秒`,
  invalid: '',
}

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

const timeAgo = useTimeAgo(dateLike, options)
const { timeAgo, ...pausable } = useTimeAgo(dateLike, { controls: true, ...otherOptions })

元素目标 ElementTarget

// 类似于 new Date(), 1_612_137_600_000, '2021-01-01', undefined, null
export type DateLike = Date | number | string | undefined | null

选项 Options

export type FormatTimeAgoOptions<UnitNames extends string = TimeAgoUnitNamesDefault> = {
  /**
   * 最大单位（毫秒差异），超过则显示完整日期而非相对时间
   *
   * @defaultValue undefined
   */
  max?: UnitNames | number
  /**
   * 完整日期的格式化器
   */
  fullDateFormatter?: TimeAgeFullDateFormatter
  /**
   * 格式化字符串的消息
   */
  messages?: TimeAgoMessages<UnitNames>
  /**
   * 最小显示时间单位（默认是分钟）
   *
   * @defaultValue false
   */
  showSecond?: boolean
  /**
   * 应用的舍入方法。
   *
   * @defaultValue 'round'
   */
  rounding?: 'round' | 'ceil' | 'floor' | number
  /**
   * 自定义单位
   */
  units?: TimeAgoUnit<UnitNames>[]
}

export interface UseTimeAgoOptions<Controls extends boolean, UnitNames extends string = TimeAgoUnitNamesDefault>
  extends FormatTimeAgoOptions<UnitNames> {
  /**
   * 公开更多控制项
   *
   * @defaultValue false
   */
  controls?: Controls
  /**
   * 更新间隔，设为 0 禁用自动更新
   *
   * @defaultValue 30_000
   */
  updateInterval?: number
}

返回值

返回值中包含可暂停、恢复的 Pausable 实例。

更多详情，请参见 Pausable。

export type UseTimeAgoReturns<Controls extends boolean = false> = Controls extends true
  ? { timeAgo: string } & Pausable
  : string

ON THIS PAGE

#useTimeAgo

#演示

#用法

#源码

#API

#元素目标 ElementTarget

#选项 Options

#返回值

useTimeAgo

演示

用法

源码

API

元素目标 ElementTarget

选项 Options

返回值