Format Relative Time

Used to format relative time to a specific locale and options

Last updated

10 months 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>

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

<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.

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>

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

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