Relative time
Relative time displays time in a way that is clear, concise, and accessible.
On this page
- @primer/react@36.27.0
- Alpha
- Not reviewed for accessibility
On this page
Import
import {RelativeTime} from '@primer/react'
Examples
Props
RelativeTime
| Name | Default | Description |
|---|---|---|
datetimeRequired | stringAn ISO8601 time representing the time | |
date | stringInstead of passing the | |
format | 'auto' | 'auto' | 'micro' | 'elapsed'The format with which to display the time |
tense | 'auto' | 'auto' | 'past' | 'future'The tense to use when displaying a relative time |
precision | 'second' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'The precision to use when displaying an elapsed time |
threshold | 'P30D' | stringThe threshold (ISO8601 duration) to display relative dates within |
prefix | 'on' | stringThe prefix to use when displaying a localised (non relative) date |
second | 'numeric' | '2-digit'The format with which to render seconds | |
minute | 'numeric' | '2-digit'The format with which to render minutes | |
hour | 'numeric' | '2-digit'The format with which to render hours | |
weekday | 'short' | 'long' | 'narrow'The format with which to render weekdays | |
day | 'numeric' | '2-digit'The format with which to render days | |
month | 'numeric' | 'numeric' | '2-digit' | 'short' | 'long' | 'narrow'The format with which to render months |
year | 'numeric' | '2-digit'The format with which to render years | |
timeZoneName | 'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric'The format with which to render the time zone | |
ref | React.RefObject<RelativeTimeElement> | |
noTitle | booleanRemoves the | |
as | "relative-time" | React.ElementType |
sx | SystemStyleObject |