Format Relative Time
Used to format relative time to a specific locale and options
Last updated
1 day 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>