Developed by Jackie Santana
- Simple and intuitive API
- Supports multiple date formats
- Lightweight and fast
- Works with Node.js and browsers
- MIT licensed
Show Time Ago is a utility that displays how long ago a given date was. Simply provide your ISO date:
showTimeAgo("2024-07-17T17:12:00.000Z"), and this utility will dynamically update the time with the suffix 'ago'. For example:now, 2 seconds ago, 2 minutes ago, 1 hour ago, 2 days ago, 1 month ago, 1 year ago.
- now, seconds, minutes, hours, days, weeks, months, years 'ago..'
dynamically update time without page reload? code examples shown below
To install this utility, you need to install the following dependencies:
npm i showtimeago or npm install showtimeago
Import
- ES6:
import showTimeAgo from 'showtimeago' - CommonJS:
const showTimeAgo = require('showtimeago')
Example:
// Vanilla JavaScript
showTimeAgo("2024-07-17T17:12:00.000Z")
// In React
{showTimeAgo('2024-07-17T17:12:00.000Z')}
console.log(showTimeAgo('2024-07-17T17:12:00.000Z'))This utility only accepts a new Date() format time. For example:
new Date().toISOString()
outputs: 2024-07-17T17:12:00.000Z ISO date format
CDN 🌐:
This is essentially a CommonJS module, so you may ignore the error: Uncaught ReferenceError: module is not defined at showTimeAgo.js:115:1 on the client side.
CDN Set up:
<script crossorigin type="text/javascript" src="https://unpkg.com/[email protected]/index.js"></script>
const showTimeAgo = showtimeago
console.log(showTimeAgo(new Date()))
Yarn: https://yarnpkg.com/package/showtimeago yarn add showtimeago
const showTimeAgo = require('showtimeago');
function updateTimeAgo() {
const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z');
console.clear(); // Clear the console
console.log(`Time ago: ${showPastTime}`);
}
// Initial update
updateTimeAgo();
// Update every minute
const intervalId = setInterval(updateTimeAgo, 60000);
// To stop the interval after a certain time (e.g., 1 hour):
// setTimeout(() => clearInterval(intervalId), 3600000);const showTimeAgo = require('showtimeago');
const fs = require('fs');
function updateTimeAgo() {
const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z');
fs.writeFileSync('timeago.txt', `Time ago: ${showPastTime}`);
console.log(`Updated timeago.txt: ${showPastTime}`);
}
// Initial update
updateTimeAgo();
// Update every minute
const intervalId = setInterval(updateTimeAgo, 60000);
// To stop the interval after a certain time (e.g., 1 hour):
// setTimeout(() => clearInterval(intervalId), 3600000);const showTimeAgo = require('showtimeago');
const comments = [
{ id: 1, text: "This is the first comment", date: "2024-07-17T17:12:00.000Z" },
{ id: 2, text: "This is the second comment", date: "2024-07-18T17:12:00.000Z" }
];
function displayComments() {
comments.forEach(comment => {
const timeAgo = showTimeAgo(comment.date);
console.log(`Comment: ${comment.text}`);
console.log(`Time ago: ${timeAgo}`);
console.log('----------');
});
}
// Initial display
displayComments();
// Update every minute
setInterval(displayComments, 60000);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Ago Example</title>
</head>
<body>
<div id="timeAgoDisplay"></div>
<script src="https://cdn.jsdelivr.net/npm/showtimeago/index.js"></script>
<script src="script.js"></script>
</body>
</html>const showTimeAgo = window.showTimeAgo;
function updateTimeAgo() {
const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z');
const showTimeAgoToBrowser = document.getElementById('timeAgoDisplay');
showTimeAgoToBrowser.textContent = `Time ago: ${showPastTime}`;
}
// Initial update
updateTimeAgo();
// Update every minute without reloading the page
setInterval(updateTimeAgo, 60000);const showTimeAgo = window.showTimeAgo;
function updateTimeAgo() {
const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z');
const showTimeAgoToBrowser = document.getElementById('timeAgoDisplay');
showTimeAgoToBrowser.innerHTML = `Time ago: ${showPastTime}`;
}
// Initial update
updateTimeAgo();
// Update every minute
setInterval(updateTimeAgo, 60000);const comments = [
{ id: 1, text: "This is the first comment", date: "2024-07-17T17:12:00.000Z" },
{ id: 2, text: "This is the second comment", date: "2024-07-18T17:12:00.000Z" }
];
function updateComments() {
const commentsContainer = document.getElementById('timeAgoDisplay');
commentsContainer.innerHTML = '';
comments.forEach(comment => {
const timeAgo = showtimeago(comment.date);
const commentElement = document.createElement('div');
commentElement.innerHTML = `
<p>${comment.text}</p>
<p>${timeAgo}</p>
`;
commentsContainer.appendChild(commentElement);
});
}
// Initial update
updateComments();
// Update every minute
setInterval(updateComments, 60000);import * as React from "react";
import showTimeAgo from "showtimeago";
export default function App() {
const [showPastTime, setPastTime] = React.useState(null);
React.useEffect(() => {
function updateTimeAgo() {
setPastTime(showTimeAgo('2024-07-18T17:12:00.000Z'));
}
// Initial update
updateTimeAgo();
// Update every minute
const timer = setInterval(updateTimeAgo, 60000);
// Cleanup function
return () => clearInterval(timer);
}, []); // Empty dependency array means this effect runs once on mount
return <div>User Posted Comment {showPastTime}</div>;
}import * as React from "react";
import showTimeAgo from "showtimeago";
export default function App() {
const [showPastTime, setPastTime] = React.useState(null);
React.useEffect(() => {
function updateTimeAgo() {
const currentTime = showTimeAgo('2024-07-18T17:12:00.000Z');
if (currentTime !== showPastTime) {
setPastTime(currentTime);
}
}
// Initial update
updateTimeAgo();
// Update every minute without causing a re-render if the value hasn't changed
const timer = setInterval(updateTimeAgo, 60000);
// Cleanup function
return () => clearInterval(timer);
}, [showPastTime]); // Add showPastTime as a dependency
return <div>User Posted Comment {showPastTime}</div>;
}This example demonstrates how to use the showtimeago package in a React application to display the time ago for comments, updating every minute.
import React, { useEffect, useState } from 'react';
import showTimeAgo from 'showtimeago';
const comments = [
{ id: 1, text: "This is the first comment", date: "2024-07-17T17:12:00.000Z" },
{ id: 2, text: "This is the second comment", date: "2024-07-18T17:12:00.000Z" }
];
function App() {
const [timeAgoComments, setTimeAgoComments] = useState([]);
useEffect(() => {
const updateTimes = () => {
const updatedComments = comments.map(comment => ({
...comment,
timeAgo: showTimeAgo(comment.date)
}));
setTimeAgoComments(updatedComments);
};
// Initial update
updateTimes();
// Update every minute
const intervalId = setInterval(updateTimes, 60000);
// Clear interval on component unmount
return () => clearInterval(intervalId);
}, []);
return (
<div>
{timeAgoComments.map(comment => (
<div key={comment.id}>
<p>{comment.text}</p>
<p>{comment.timeAgo}</p>
</div>
))}
</div>
);
}
export default App;We welcome all contributions! If you have any cool ideas or features you think should be added, please:
- Open an Issue: Start by opening an issue to discuss your idea.
- Fork the Repository: Fork the project to work on your idea.
- Create a Branch:
- For new features:
feature/your-feature-name - For bug fixes:
patch-bug-fix - For tests:
test/your-test-name - For CI/CD:
ci-actions
- For new features:
- Push Your Changes: Push your changes to your fork.
- Submit a Pull Request: Open a pull request to the appropriate branch of the main repository.
- development: For new features and improvements.
- patch-bugs: For bug fixes.
- test: For adding or updating tests.
- ci-actions: For CI/CD pipeline configurations.
- main: The production branch. Changes will be merged here after thorough testing.
Thank you for all your contributions and efforts to improve the ShowTimeAgo utility! Together, we can make this tool more robust and useful for everyone. 🙌
This project is licensed under the MIT License - see the LICENSE file for details.
For any questions or feedback, please reach out to Jackie Santana on Twitter at @js_programmer84 or via email at [email protected].
Happy coding! 💻