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

Install

npm i react-live-relative-time

Usage

import { LiveRelativeTime } from "react-live-relative-time"

export default function Component() {
  return (
    <LiveRelativeTime timestamp={Date.now()}>
  )
}

Example

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>
  );
}

Behaviour

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

Footprint

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.

Author

👤 flynnhillier

• Github: @FlynnHillier
• LinkedIn: @flynn-hillier

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 flynnhillier. This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator