Marc Reichel

alpine-typewriter

Alpine.js plugin to add a typewriter effect to any HTML element.

igdb-laravel

Simplify the integration of the IGDB API into your Laravel app. Including IGDB webhook support.

alpine-autosize

Alpine.js plugin to automatically resize a textarea to fit its content.

alpine-auto-animate

Alpine.js wrapper for @formkit/auto-animate.

alpine-timeago

Simple Alpine.js plugin to display the human-readable distance between a date and now.

tailwind-css-properties

Export your TailwindCSS theme colors as css custom properties.

All repositories My tool box Blog About me GitHub Profile
Back

Alpine TimeAgo

Get the human-readable distance from a date and now.

· 2 min read

My newest Alpine.js plugin alpine-timeago lets you display the human-readable distance between a date and now (like "3 months ago", "about 2 hours ago" or "in 4 hours").

The output gets updated every 30 seconds, so it is always up-to-date.

After installing the package you can simply add the x-timeago directive to any HTML element, provide the desired date inside the directive and the content of that element gets populated with the human-readable distance.

<span x-data="{ date: new Date() }" x-timeago="date">
    <!-- will be something like "about 3 hours ago" for example -->
</span>

You can read the full documentation on GitHub.

#alpinejs
#plugin
#timeago

Related Posts

Alpine TypeWriter

Add a typewriter effect to any HTML element.

I've just released yet another small Alpine.js plugin - alpine-typewriter. …

2 min read

Alpine Autosize

Let textareas resize automatically to match their content.

Today I have released a small but helpful Alpine.js plugin to add auto-sizing for textareas in your app. …

1 min read

Alpine Auto Animate

An Alpine.js wrapper for FormKit AutoAnimate.

I've tagged version 1.0 of my small Alpine.js wrapper around @formkit/auto-animate (Website). …

2 min read
This page may contain affiliate links. If you go through one of them to make a purchase I will earn a commission. Keep in mind that I link this product because of its quality and not because of the commission I receive from your purchases. The decision is yours, and whether or not you decide to buy something is completely up to you.