Relative Time

import { RelativeTime } from '@hanzo/ui'

Default

An hour-old moment read as friendly words.

1 hour ago

export function Default() {
  const anHourAgo = new Date(Date.now() - 60 * 60 * 1000)
  return <RelativeTime date={anHourAgo} />
}

Short

The same distance abbreviated, e.g. "3h" instead of "3 hours ago".

export function Short() {
  const threeHoursAgo = new Date(Date.now() - 3 * 60 * 60 * 1000)
  return <RelativeTime date={threeHoursAgo} format="short" />
}

Long

Locale-correct phrasing from Intl.RelativeTimeFormat.

yesterday

export function Long() {
  const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000)
  return <RelativeTime date={yesterday} format="long" />
}

A timeline

Several moments, past and future, read at once.

5 minutes ago2 days agoin 1 hour

export function Timeline() {
  const now = Date.now()
  return (
    <YStack gap="$2">
      <RelativeTime date={new Date(now - 5 * 60 * 1000)} />
      <RelativeTime date={new Date(now - 2 * 24 * 60 * 60 * 1000)} />
      <RelativeTime date={new Date(now + 60 * 60 * 1000)} />
    </YStack>
  )
}

Types

export type RelativeTimeFormat = 'auto' | 'short' | 'long'

export type RelativeTimeProps = Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {
  date: Date | string
  format?: RelativeTimeFormat
  updateInterval?: number
}

Exports

RelativeTimetype RelativeTimeFormattype RelativeTimeProps