This component is available on GitHub.
Stimulus Timeago
A Stimulus controller that returns the distance between the given date and now in words.
This controller is using date-fns/formatDistanceToNow behind the scene.
Installation
$ yarn add stimulus-timeago
And use it in your JS file:
// Probably in app/javascript/controllers/index.js
import { Application } from '@hotwired/stimulus'
import Timeago from 'stimulus-timeago'
const application = Application.start()
application.register('timeago', Timeago)
π Demo
See demo βUsage
In your view:
<p>
Stimulus 1.0.0 was released
<time data-controller="timeago" data-timeago-datetime-value="2018-01-30T09:00"></time>.
</p>
π Configuration
Attribute | Default | Description | Optional |
---|---|---|---|
data-timeago-datetime-value | undefined | String that can be parsed by Date.parse() . | β |
data-timeago-refresh-interval-value | undefined | Interval in milliseconds to reload the distance. | β |
data-timeago-include-seconds-value | false | Distances less than a minute are more detailed | β |
data-timeago-add-suffix-value | false | Result specifies if now is earlier or later than the passed date | β |
includeSeconds
and addSuffix
are the options of the date-fns/formatDistanceToNow method.
If the datetime string passed via data-timeago-datetime-value
is not parseable by Date.parse()
it will display the given value instead.
Bonus
If you're using Rails, you can define this helper:
def timeago(date, format: :long)
return if date.blank?
content = I18n.l(date, format: format)
tag.time(content,
title: content,
data: {
controller: 'timeago',
timeago_datetime_value: date.iso8601
})
end
And use it in your html:
<p>Created <%= timeago(@project.created_at) %></p>
π Extending Controller
You can use inheritance to extend the functionality of any Stimulus component:
import Timeago from 'stimulus-timeago'
import { fr } from 'date-fns/locale'
export default class extends Timeago {
connect() {
super.connect()
console.log('Do what you want here.')
}
// You can override this getter to change the locale.
// Don't forget to import it.
get locale() {
return fr
}
}
This controller will automatically have access to targets defined in the parent class.
If you override the connect
, disconnect
or any other methods from the parent, you'll
want to call super.method()
to make sure the parent functionality is executed.
βοΈ Sponsors
Stimulus Component is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support Stimulus Components development on Github Sponsors. π
π· Contributing
Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
Donβt forget to drop a π on Github to support the project.
π License
This project is released under the MIT license.