๐ Timestamp: 2023-08-06T12:30:00
Ever wondered how to display the time elapsed since a specific event? ๐ค With the TimeAgo component in React, you can do just that! ๐
Simply pass the timestamp as a prop, and the TimeAgo component will automatically calculate the time elapsed since that moment. ๐ก
๐ Examples:
timestamp="2023-08-06T12:30:00" โก๏ธ "Less than a minute ago"
timestamp="2023-08-05T15:45:00" โก๏ธ "about 21 hours ago"
timestamp="2023-08-04T10:00:00" โก๏ธ "2 days ago"
Now you can keep your users informed about the freshness of the content or show how long ago a particular event occurred. โฐ
import { parseISO, formatDistanceToNow } from "date-fns";
const TimeAgo = ({ timestamp }) => {
let timeAgo = "";
if (timestamp) {
const date = parseISO(timestamp);
const timePeriod = formatDistanceToNow(date);
timeAgo = `${timePeriod} ago`;
}
return (
<span>
<i>{timeAgo}</i>
</span>
);
};
export default TimeAgo;
๐ Give it a try and boost your app's interactivity with TimeAgo! Happy coding! ๐
Top comments (2)
Welcome to this awesome platform, what you just shared is invaluable to React Developers, please keep it up and it would nice if you write a long form content on how React developers can better use this awesome library.
Thank you.
thanks for sharing
good reactions so far ^^