A super-lightweight react component library that displays text that describes a given ms-epoch timestamp relative to the current moment, updated in real-time.
🏠 Homepage
npm i react-live-relative-timeimport { LiveRelativeTime } from "react-live-relative-time"
export default function Component() {
return (
<LiveRelativeTime timestamp={Date.now()}>
)
}import "./App.css";
import { LiveRelativeTime } from "react-live-relative-time";
export default function App() {
return (
<div>
<span>now</span>
<LiveRelativeTime timestamp={Date.now()} />
<span>+ 5 seconds</span>
<LiveRelativeTime timestamp={Date.now() + 5000} />
<span>+ 1 minute, 5 seconds</span>
<LiveRelativeTime timestamp={Date.now() + 65000} />
<span>- 55 seconds</span>
<LiveRelativeTime timestamp={Date.now() - 55000} />
<span>- 1 hour </span>
<LiveRelativeTime timestamp={Date.now() - 3600000} />
<span>- 59 minutes, 55 seconds </span>
<LiveRelativeTime timestamp={Date.now() - 3595000} />
<span>- 3 months</span>
<LiveRelativeTime timestamp={Date.now() - 2629746000 * 3} />
<span>2020</span>
<LiveRelativeTime timestamp={1577836800000} />
</div>
);
}
The description provided will always reference the timestamp using the largest possible unit, given the amount of time between now and the provided timestamp.
The units used are:
- second
- minute
- hour
- day
- week
- month
- year
The library does not utilise any external packages, this way we can maintain a miniscule bundle size.
To achieve relative time formatting, no use of packages such as moment.js or similar are used; instead this package makes use of javascript's built-in Intl.RelativeTimeFormat() constructor to handle string formatting.
👤 flynnhillier
- Github: @FlynnHillier
- LinkedIn: @flynn-hillier
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2024 flynnhillier.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator