Format Relative Time

Format relative time using the native `Intl.RelativeTimeFormat` API.

Usage

The relative time formatting logic is handled by the native Intl.RelativeTimeFormat API and smartly cached to avoid performance issues when using the same locale and options.

import { Format } from '@cerberus/react'

Examples

Basic

Use the Format.RelativeTime component to format a relative time with default options.

Edited 9 months ago

'use client'

import { Format } from '@cerberus/react'

export const RelativeTimeBasic = () => {
  return (
    <div>
      Edited <Format.RelativeTime value={new Date('2025-05-05')} />
    </div>
  )
}

Short

Use the style="short" prop to format the relative time in short format.

Edited 9 mo. ago

'use client'

import { Format } from '@cerberus/react'

export const RelativeTimeShort = () => {
  return (
    <div>
      Edited <Format.RelativeTime value={new Date('2025-05-05')} style="short" />
    </div>
  )
}

On this page

Edit this page on Github