Skip to content

Framework-independent Time Ago web component. Works with Ionic, Angular, React, Vue, vanilla Javascript, etc. Built with Stencil.js and date-fns.

License

Notifications You must be signed in to change notification settings

kodeine/time-ago-web-component

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Time Ago web component

Next page: Setup

Framework-independent Time Ago "pipe." Web component that works with Ionic, Angular, React, Vue, vanilla Javascript, etc. Built with Stencil.js and the date-fns function distanceInWordsToNow.

Installation

npm install time-ago-web-component --save

Sample Usage

Aquinas died <time-ago time="7 January 1274"></time-ago>.          // in template
Aquinas died about 744 years ago.                                  // output

You can also use your framework to bind a variable to time. The input to time can be a Date, string or number. The syntax varies by framework. To use Angular as an example:

now = new Date();                                               // Typescript                     
You entered this page <time-ago [time]="now"                    // in template
                                seconds="true"></time-ago>.
You entered this page less than 5 seconds ago.                  // output (updates automatically)

Options

seconds

Boolean flag, default value false. If you set it to true, the time-ago expression will include seconds when appropriate.

append

String, default value ' ago'. The value of append will be appended to the time-ago expression.

prepend

String, default value is the empty string. The value of prepend will be prepended to the time-ago expression.

Next page: Setup

About

Framework-independent Time Ago web component. Works with Ionic, Angular, React, Vue, vanilla Javascript, etc. Built with Stencil.js and date-fns.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 84.7%
  • HTML 9.9%
  • JavaScript 5.3%
  • CSS 0.1%