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.