# react-timed-renderer

> React component that re-renders at the interval provided.

Latest version **1.2.6** (published 2025-02-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-timed-renderer
pnpm add react-timed-renderer
yarn add react-timed-renderer
bun add react-timed-renderer
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2025-02-18 |
| First published | 2020-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Justin Mahar |
| Maintainers | justinmahar |
| Keywords | react, timed, timer, render, renderer, frame, rate, repeat, delay, interval |

## Links

- npm: https://www.npmjs.com/package/react-timed-renderer
- Repository: https://github.com/justinmahar/react-timed-renderer
- Homepage: https://justinmahar.github.io/react-timed-renderer/
- Issues: https://github.com/justinmahar/react-timed-renderer/issues
- npm.io page: https://npm.io/package/react-timed-renderer

## Dependencies (1)

- [react-sub-unsub](https://npm.io/package/react-sub-unsub.md) ^2.2.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.6 (latest) — 2025-02-18
- 1.2.5 — 2024-02-10
- 1.2.4 — 2024-02-09
- 1.2.3 — 2024-02-09
- 1.2.2 — 2024-02-09
- 1.2.1 — 2024-02-09
- 1.1.2 — 2023-01-12
- 1.1.1 — 2023-01-12
- 1.0.9 — 2022-05-19
- 1.0.8 — 2021-02-28
- 1.0.7 — 2020-05-04
- 1.0.6 — 2020-05-04
- 1.0.5 — 2020-05-03
- 1.0.4 — 2020-05-02

## README

<h2 align="center">
  ⏳ React Timed Renderer
</h2>
<h3 align="center">
  React component that re-renders at the interval provided.
</h3>
<p align="center">
  <a href="https://badge.fury.io/js/react-timed-renderer" target="_blank" rel="noopener noreferrer"><img src="https://badge.fury.io/js/react-timed-renderer.svg" alt="npm Version" /></a>&nbsp;
  <a href="https://github.com/justinmahar/react-timed-renderer/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/GitHub-Source-success" alt="View project on GitHub" /></a>&nbsp;
  <a href="https://github.com/justinmahar/react-timed-renderer/actions?query=workflow%3ADeploy" target="_blank" rel="noopener noreferrer"><img src="https://github.com/justinmahar/react-timed-renderer/workflows/Deploy/badge.svg" alt="Deploy Status" /></a>
</p>
<!-- [lock:donate-badges] 🚫--------------------------------------- -->
<p align="center">
  <a href="https://paypal.me/thejustinmahar/5"><img src="https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=KoFi&color=%23fe8e86" alt="Buy me a coffee" /></a>&nbsp;<a href="https://github.com/sponsors/justinmahar" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="Sponsor"/></a>
</p>
<!-- [/lock:donate-badges] ---------------------------------------🚫 -->

## Documentation

Read the **[official documentation](https://justinmahar.github.io/react-timed-renderer/)**.

[![Demo](https://justinmahar.github.io/react-timed-renderer/demo.gif "Demo")](https://justinmahar.github.io/react-timed-renderer/?path=/story/docs-timedrenderer--docs#example)

👁️ **[Live Demo](https://justinmahar.github.io/react-timed-renderer/?path=/story/docs-timedrenderer--docs#example)**

## Overview

A component that re-renders at regular intervals.

Just provide the interval in milliseconds and a render prop.

### Features include:

- **🙌 Simple and easy**
  - Render components at timed intervals with ease.
- **🎯 Straightforward**
  - Dead simple and straightforward timed component.
- **🧰 Versatile**
  - A useful tool to have in your React toolkit.

<!-- [lock:donate] 🚫--------------------------------------- -->

## Donate 

If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!

<a href="https://github.com/sponsors/justinmahar"><img src="https://justinmahar.github.io/react-kindling/support/sponsor.png" alt="Sponsor via GitHub" height="35" /></a>&nbsp; <a href="https://paypal.me/thejustinmahar/5"><img src="https://justinmahar.github.io/react-kindling/support/coffee-1.png" alt="Buy me a coffee" height="35" /></a>&nbsp; <a href="https://paypal.me/thejustinmahar/15"><img src="https://justinmahar.github.io/react-kindling/support/coffee-3.png" alt="Buy me 3 coffees" height="35" /></a>&nbsp; <a href="https://paypal.me/thejustinmahar/25"><img src="https://justinmahar.github.io/react-kindling/support/coffee-5.png" alt="Buy me 5 coffees" height="35" /></a>

<!-- [/lock:donate] ---------------------------------------🚫 -->

## Table of Contents 

- [Documentation](#documentation)
- [Overview](#overview)
  - [Features include:](#features-include)
- [Donate](#donate)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [TypeScript](#typescript)
- [Icon Attribution](#icon-attribution)
- [Contributing](#contributing)
- [⭐ Found It Helpful? Star It!](#-found-it-helpful-star-it)
- [License](#license)

## Installation

```
npm i react-timed-renderer
```

## Quick Start

```jsx
import { TimedRenderer } from "react-timed-renderer";
```

```jsx
<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](https://justinmahar.github.io/react-timed-renderer/?path=/story/docs-timedrenderer--docs#example) for an example using CSS transitions.

<!-- [lock:typescript] 🚫--------------------------------------- -->

## TypeScript

Type definitions have been included for [TypeScript](https://www.typescriptlang.org/) support.

<!-- [/lock:typescript] ---------------------------------------🚫 -->

<!-- [lock:icon] 🚫--------------------------------------- -->

## Icon Attribution

Favicon by [Twemoji](https://github.com/twitter/twemoji).

<!-- [/lock:icon] ---------------------------------------🚫 -->

<!-- [lock:contributing] 🚫--------------------------------------- -->

## 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.

<!-- [/lock:contributing] --------------------------------------🚫 -->

## ⭐ Found It Helpful? [Star It!](https://github.com/justinmahar/react-timed-renderer/stargazers)

If you found this project helpful, let the community know by giving it a [star](https://github.com/justinmahar/react-timed-renderer/stargazers): [👉⭐](https://github.com/justinmahar/react-timed-renderer/stargazers)

<!-- [lock:support] 🚫--------------------------------------- -->
Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:

<a href="https://paypal.me/thejustinmahar/5"><img src="https://justinmahar.github.io/react-kindling/support/coffee-1.png" alt="Buy me a coffee" height="35" /></a>&nbsp; <a href="https://paypal.me/thejustinmahar/15"><img src="https://justinmahar.github.io/react-kindling/support/coffee-3.png" alt="Buy me 3 coffees" height="35" /></a>&nbsp; <a href="https://paypal.me/thejustinmahar/25"><img src="https://justinmahar.github.io/react-kindling/support/coffee-5.png" alt="Buy me 5 coffees" height="35" /></a>

<!-- [/lock:support] ---------------------------------------🚫 -->

## License

See [LICENSE.md](https://justinmahar.github.io/react-timed-renderer/?path=/docs/license--docs).

---
_Source: https://npm.io/package/react-timed-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._