⏳ React Timed Renderer
React component that re-renders at the interval provided.
Documentation
Read the official documentation.
Overview
A component that re-renders at regular intervals.
Just provide the interval in milliseconds and a render prop.
The built-in precision timer will handle the rest!
Features include:
-
🙌 Simple and easy- Render components at timed intervals with ease.
-
🎯 Precise timing- Underlying timer is both accurate and precise.
-
🧰 Versatile- A useful tool to have in your React toolkit.
Donate
I hope this project makes your life a little easier! If it does and you'd like to show your appreciation, consider supporting the project with a coffee or sponsorship.
Your support helps keep the project going and will earn you some serious virtual high fives. Maybe even a virtual fist bump if you're feeling extra cool.
Table of Contents
- Documentation
- Overview
- Donate
- Table of Contents
- Installation
- Quick Start
- TypeScript
- Icon Attribution
- Contributing
⭐ Found It Helpful? Star It!- License
Installation
npm i react-timed-renderer
Quick Start
import { TimedRenderer } from "react-timed-renderer";<TimedRenderer
interval={1000}
render={(time) => <div>Rendered at: {time}</div>}
/>Provide an interval in milliseconds and a render prop.
The render prop receives a single argument, which is the time (in Unix milliseconds) at which the render occurred, in case that's useful to you.
See the demo for an example using CSS transitions.
TypeScript
Type definitions have been included for TypeScript support.
Icon Attribution
Favicon by Twemoji.
Contributing
Open source software is awesome and so are you.
Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.
For major changes, open an issue first to discuss what you'd like to change.
⭐ Found It Helpful? Star It!
If you found this project helpful, let the community know by giving it a star:
License
See LICENSE.md.