@joinbox/relative-time
v1.3.0
Published
Custom element that displays localized relative time (e.g. '4 days ago')
Downloads
40
Readme
Relative Time
Displays relative time (e.g. '3 days ago') in a custom element. Uses best guesses to decide what unit (e.g. day, week etc.) to use.
Advantages
- Good test coverage
- Custom element (no vendor dependencies)
- Small file size
- Uses standard JS functionality (Intl.RelativeTimeFormat) with broad browser support
- Use within a HTML
<time>
element to get optimum semantics
Example
<!-- Use browser's locale -->
<relative-time data-time="2023-03-02 10:00:03">2023-03-02</relative-time>
<!-- Use de as locale -->
<relative-time data-time="2023-03-02 10:00:03" data-locale="de">March 2023</relative-time>
<!-- Embed script-->
<script type="module">
import @joinbox/relative-time;
</script>
Components
Relative Time
Exposed Element
<relative-time></relative-time>
Attributes
data-time
(required): A time string that can be parsed by new Date()). Relative time will be calculated in relation to the current time.data-locale
(optional): A BCP 47 language tag or an Intl.Locale instance (see documentation)
Events
No events are fired.