diff --git a/README.md b/README.md index f96b0ff..041e534 100644 --- a/README.md +++ b/README.md @@ -18,10 +18,10 @@ alt="NPM Version"> 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`. ##### List of time suffixes: -- minutes, hours, days, weeks, months, years 'ago..' +- now, seconds, minutes, hours, days, weeks, months, years 'ago..' ##### Default: showTimeago updates on page reload _dynamically update time without page reload? code examples shown below_ @@ -42,17 +42,17 @@ ___ Example: ```javascript // Vanilla JavaScript -showTimeAgo("2022-06-20T13:42:29-05:00") +showTimeAgo("2024-07-17T17:12:00.000Z") // In React -{showTimeAgo('2022-07-02T23:12:01.449Z')} +{showTimeAgo('2024-07-17T17:12:00.000Z')} -console.log(showTimeAgo('2022-07-02T23:12:01.449Z')) +console.log(showTimeAgo('2024-07-17T17:12:00.000Z')) ``` This utility only accepts a new Date() format time. For example: `new Date().toISOString()` -outputs: `2022-07-02T23:12:01.449Z` _ISO date format_ +outputs: `2024-07-17T17:12:00.000Z` _ISO date format_ **CDN 🌐**: - https://cdn.jsdelivr.net/npm/showtimeago/index.js @@ -69,7 +69,7 @@ const showTimeAgo = showtimeago console.log(showTimeAgo(new Date())) ``` -**Yarn**: [https://yarnpkg.com/package/showtimeago ](https://yarnpkg.com/package?q=showtimeago&name=showtimeago&version=3.3.13)`yarn add showtimeago` +**Yarn**: [https://yarnpkg.com/package/showtimeago ](https://yarnpkg.com/package?q=showtimeago&name=showtimeago)`yarn add showtimeago` ___ #### By default, showTimeAgo updates only when the page is reloaded @@ -115,6 +115,32 @@ const intervalId = setInterval(updateTimeAgo, 60000); // To stop the interval after a certain time (e.g., 1 hour): // setTimeout(() => clearInterval(intervalId), 3600000); +``` + +## Node Example with Real-time Updates Via Comment Thread +```javascript +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); + ``` ___ ## Vanilla JavaScript Example @@ -174,6 +200,36 @@ updateTimeAgo(); // Update every minute setInterval(updateTimeAgo, 60000); ``` + +### Vanilla JavaScript Example with Real-time Updates Via Comment Thread + +```javascript +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 = ` +

${comment.text}

+

${timeAgo}

+ `; + commentsContainer.appendChild(commentElement); + }); +} + +// Initial update +updateComments(); + +// Update every minute +setInterval(updateComments, 60000); +``` ___ ## React Example (with rerender) ```jsx @@ -233,6 +289,56 @@ export default function App() { } ``` +## React Example with Real-time Updates Via Comment Thread + +This example demonstrates how to use the `showtimeago` package in a React application to display the time ago for comments, updating every minute. + +```jsx +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 ( +
+ {timeAgoComments.map(comment => ( +
+

{comment.text}

+

{comment.timeAgo}

+
+ ))} +
+ ); +} + +export default App; +``` + ## Contributing 🤝 We welcome all contributions! If you have any cool ideas or features you think should be added, please: diff --git a/package.json b/package.json index 21536b1..9d4ba77 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "showtimeago", - "version": "4.0.5", + "version": "4.0.9", "description": "ShowTimeAgo is a utility that provides a human-readable format of how long ago a date was with zero configuration.", "main": "index.js", "scripts": { @@ -33,5 +33,8 @@ "devDependencies": { "jest": "^28.1.2", "nodemon": "^3.1.4" + }, + "engines": { + "node": ">=14.0.0" } }