Skip to content

Latest commit

 

History

History
116 lines (79 loc) · 3.43 KB

README.md

File metadata and controls

116 lines (79 loc) · 3.43 KB
Raw

Welcome to react-live-relative-time 👋

Version License: MIT Downloads

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

gif

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

🤝 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