showtimeago
Advanced tools
ShowTimeAgo is a utility that provides a human-readable format of how long ago a date was with zero configuration.
Developed by Jackie Santana
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.
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
import showTimeAgo from 'showtimeago'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/showtimeago@4.0.4/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:
feature/your-feature-namepatch-bug-fixtest/your-test-nameci-actionsThank 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 santanaj9817@gmail.com.
Happy coding! 💻
FAQs
ShowTimeAgo is a utility that provides a human-readable format of how long ago a date was with zero configuration.
The npm package showtimeago receives a total of 4 weekly downloads. As such, showtimeago popularity was classified as not popular.
We found that showtimeago demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.