Format Relative Time

Used to format relative time to a specific locale and options

Last updated

2 weeks ago

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 '@ark-ui/react'

Examples

Basic

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

import { Format } from '@ark-ui/react/format'

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

import { Format } from '@ark-ui/solid/format'

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

<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
</script>

<template>
  <div>
    Edited
    <Format.RelativeTime :value="new Date('2025-05-05')" />
  </div>
</template>

Short

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

import { Format } from '@ark-ui/react/format'

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

import { Format } from '@ark-ui/solid/format'

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

<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
</script>

<template>
  <div>
    Edited
    <Format.RelativeTime :value="new Date('2025-05-05')" :style="'short'" />
  </div>
</template>