RelativeTime
RelativeTime displays time in a way that is clear, concise, and accessible.
Page navigation navigation
React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y
This component's features all come from the relative-time-element (GitHub staff only) custom element.
React examples
Default
With time
With leading zeros
Without "on" prefix
Micro format
Without a title attribute
As a link with a tooltip
Props
RelativeTime
| Name | Required | Description |
|---|---|---|
datetime | Required | stringAn ISO8601 time representing the time |
date | stringInstead of passing the `datetime`, it is possible to pass a full `Date` object into the `date` prop | |
format | 'auto' | 'micro' | 'elapsed'The format with which to display the time | |
tense | 'auto' | 'past' | 'future'The tense to use when displaying a relative time | |
precision | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'The precision to use when displaying an elapsed time | |
threshold | stringThe threshold (ISO8601 duration) to display relative dates within | |
prefix | 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' | '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 `title` attribute provided on the element by default | |
attributeChangedCallback | (attrName: string, oldValue: unknown, newValue: unknown) => void | |
connectedCallback | () => void | |
onRelativeTimeUpdated | null | (event: RelativeTimeUpdatedEvent) => void | |
update | () => void | |
as | React.ElementType | |
sx | SystemStyleObject |