# react-interval

> Safe React wrapper for setInterval

Latest version **2.1.2** (published 2021-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-interval
pnpm add react-interval
yarn add react-interval
bun add react-interval
```

## Health

**Score 25/100 (F)** — status: abandoned.

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2021-04-04 |
| First published | 2015-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 46 |
| Author | Nik Butenko |
| Maintainers | nkbt |
| Keywords | component, react-component, react, interval, timer, timeout, setTimeout, setInterval, repeater |

## Links

- npm: https://www.npmjs.com/package/react-interval
- Repository: https://github.com/nkbt/react-works/tree/master/packages/interval
- Issues: https://github.com/nkbt/react-works/issues
- npm.io page: https://npm.io/package/react-interval

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

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

- 2.1.2 (latest) — 2021-04-04
- 2.1.1 — 2019-10-24
- 2.1.0 — 2019-05-10
- 2.0.2 — 2017-09-30
- 2.0.1 — 2017-05-17
- 1.3.3 — 2016-09-04
- 1.3.2 — 2016-07-05
- 1.3.1 — 2016-04-15
- 1.3.0 — 2016-04-10
- 1.2.1 — 2015-10-16
- 1.2.0 — 2015-10-15
- 1.0.8 — 2015-10-03
- 1.0.6 — 2015-08-30
- 1.0.5 — 2015-08-09
- 1.0.4 — 2015-07-28
- … 3 more at https://npm.io/package/react-interval/versions

## README

# react-interval [![npm](https://img.shields.io/npm/v/react-interval.svg?style=flat-square)](https://www.npmjs.com/package/react-interval)

Safe React wrapper for setInterval

[![Gitter](https://img.shields.io/gitter/room/nkbt/help.svg?style=flat-square)](https://gitter.im/nkbt/help)
[![Dependencies](https://img.shields.io/david/nkbt/react-interval.svg?style=flat-square)](https://david-dm.org/nkbt/react-interval)
[![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-interval.svg?style=flat-square)](https://david-dm.org/nkbt/react-interval#info=devDependencies)


## Installation


### NPM

```sh
npm install --save react react-interval
```

Don't forget to manually install peer dependencies (`react`) if you use npm@3.


### 1998 Script Tag:

```html
<script src="https://unpkg.com/react/dist/react.min.js"></script>
<script src="https://unpkg.com/react-interval/build/react-interval.min.js"></script>
(Module exposed as `ReactInterval`)
```


## Demo

[http://nkbt.github.io/react-interval](http://nkbt.github.io/react-interval)

## Codepen demo

[http://codepen.io/nkbt/pen/ZGmpoO](http://codepen.io/nkbt/pen/ZGmpoO?editors=101)

## Usage

### Quickstart
Start counting on render

```js
import ReactInterval from 'react-interval';

const App = React.createClass({
  getInitialState() {
    return {count: 0};
  },

  render() {
    const {count} = this.state;

    return (
      <div>
        {count}
        <ReactInterval timeout={1000} enabled={true}
          callback={() => this.setState({count: this.state.count + 1})} />
      </div>
    );
  }
});
```

### Full example
Change timeout on the fly, start and stop counting

```js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactInterval from 'react-interval';

const App = React.createClass({
  getInitialState() {
    return {
      enabled: false,
      timeout: 1000,
      count: 0
    };
  },

  render() {
    const {timeout, enabled, count} = this.state;

    return (
      <div>
        <ReactInterval {...{timeout, enabled}}
          callback={() => this.setState({count: this.state.count + 1})} />

        <input type="number" step="200" min="200" max="5000" value={this.state.timeout}
          onChange={({target: {value}}) => this.setState({timeout: parseInt(value, 10)})} />&nbsp;

        <button disabled={enabled} onClick={() => this.setState({enabled: true})}>
          Start</button>&nbsp;

        <button disabled={!enabled} onClick={() => this.setState({enabled: false})}>
          Stop</button>&nbsp;

        {count}
      </div>
    );
  }
});

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);
```

## Options


#### `callback`: PropTypes.func.isRequired

Function repeatedly called after timeout


#### `enabled`: PropTypes.bool (default: false)

Should start timer?


#### `timeout`: PropTypes.number (default: 1000)

Timeout before each `callback` call


## License

MIT

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