“Time Ago” React Component to display Timestamp as formatted String

Hey fellows,

There are many ways to display a Date or a timestamp, but the often appropriate is to show the elapsed time in a readable format.

So I drafted a little React component that takes a number of milliseconds for props and turns into a string of relative seconds, minutes, hours, days, months or years.

import TimeAgo from '../components/TimeAgo';

const date = Date.now(),
    tests = [date - 6789, date - 456789, date - 23456789, date - 123456789, date - 9123456789, date - 89123456789];

return <ul>{tests.map((timestamp, key) => <li key={key}>
    <TimeAgo timestamp={timestamp}/>.
</li>)}</ul>;

• 7 seconds ago.
• 8 minutes ago.
• 7 hours ago.
• 1 day ago.
• 4 months ago.
• 3 years ago.

The component gives a time element with a datetime property.

<time datetime="2018-02-22T00:21:08.005Z">1 day ago</time>

The code is fairly short and simple, and is available on GitHub as susual.

😉