https://github.com/chrisburnell/relative-time

A Web Component to display a relative time. There are many like it, but this one is mine.
https://github.com/chrisburnell/relative-time

custom-element custom-elements customelement customelements javascript web-component web-components webcomponent webcomponents

Last synced: 3 days ago
JSON representation

A Web Component to display a relative time. There are many like it, but this one is mine.

• Host: GitHub
• URL: https://github.com/chrisburnell/relative-time
• Owner: chrisburnell
• License: mit
• Created: 2024-04-12T11:40:40.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-11T14:27:38.000Z (about 2 months ago)
• Last Synced: 2024-09-21T02:02:20.322Z (6 days ago)
• Topics: custom-element, custom-elements, customelement, customelements, javascript, web-component, web-components, webcomponent, webcomponents
• Language: JavaScript
• Homepage: https://chrisburnell.com/relative-time/
• Size: 53.7 KB
• Stars: 31
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# ``

A Web Component to display a relative time.

**[Demo](https://chrisburnell.github.io/relative-time/demo.html)** | **[Further reading](https://chrisburnell.com/relative-time/)**

## Usage

### General usage example

```html

9 April 2024

```

### Explicit locale

```html

9 April 2024

```

### Inherited locale

```html



    9 April 2024



```


### Update frequency

```html

9 April 2024

9 April 2024

```

### Specific division

```html

9 April 2024

```

### Maximum division

```html

9 April 2024

```

### Numeric format

```html

9 April 2024

9 April 2024

```

### Style format

```html

9 April 2024

9 April 2024

9 April 2024

```

## Installation

You have a few options (choose one of these):

1. Install via [npm](https://www.npmjs.com/package/@chrisburnell/relative-time): `npm install @chrisburnell/relative-time`

1. [Download the source manually from GitHub](https://github.com/chrisburnell/relative-time/releases) into your project.

1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

## Usage

Make sure you include the `` in your project (choose one of these):

```html

<!-- Host yourself -->

<script type="module" src="relative-time.js">

```

```html

```

```html

```

## Credit

With thanks to the following people:

- [David Darnes](https://darn.es) for creating this [Web Component repo template](https://github.com/daviddarnes/component-template)