# @use-it/interval

> A custom React Hook that provides a declarative useInterval.

Latest version **1.0.0** (published 2020-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @use-it/interval
pnpm add @use-it/interval
yarn add @use-it/interval
bun add @use-it/interval
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-11-21 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 161 |
| Author | Donavon West |
| Maintainers | donavon |
| Keywords | react-hooks, hooks, react, utils, lib, interval |

## Links

- npm: https://www.npmjs.com/package/@use-it/interval
- Repository: https://github.com/donavon/use-interval
- Homepage: https://github.com/donavon/use-interval#readme
- Issues: https://github.com/donavon/use-interval/issues
- npm.io page: https://npm.io/package/@use-it/interval

## 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.0.0 (latest) — 2020-11-21
- 1.0.0-beta.2 (next) — 2020-11-21
- 1.0.0-beta.1 — 2020-11-20
- 0.1.4 — 2020-11-19
- 0.1.3 — 2019-04-13
- 0.1.2 — 2019-04-11
- 0.1.1 — 2019-02-13
- 0.1.0 — 2019-02-13

## README

# @use-it/interval

A custom React Hook that provides a declarative `setInterval` called `useInterval`.

> New version 1.0 has been completely rewritten in TypeScript!

[![npm version](https://badge.fury.io/js/%40use-it%2Finterval.svg)](https://badge.fury.io/js/%40use-it%2Finterval)
[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)

This hook is an implementation of [Dan Abramov](https://github.com/gaearon)'s blog post
["Making setInterval Declarative with React Hooks"](https://overreacted.io/making-setinterval-declarative-with-react-hooks/).

## Installation

```bash
$ npm i @use-it/interval
```

or

```bash
$ yarn add @use-it/interval
```

## Usage

Here is a basic setup.

```js
useInterval(callback, delay);
```

### Parameters

Here are the parameters that you can use.

| Parameter  | Description                                                                      |
| :--------- | :------------------------------------------------------------------------------- |
| `callback` | A function that will be called every `delay` milliseconds.                       |
| `delay`    | A number representing the delay in msecs. Set to `null` to "pause" the interval. |

### Return

This hook returns nothing.

## Example

Let's look at some sample code. Here is a `Counter` component that counts up every second.

```js
import React, { useState } from 'react';
import useInterval from '@use-it/interval';

const Counter = ({ delay = 1000 }) => {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount((currentCount) => currentCount + 1);
  }, delay);

  return <h1>{count}</h1>;
};

export default Counter;
```

## Live demo

You can view/edit the sample code above on CodeSandbox.

[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2n542qnzr)

## License

**[MIT](LICENSE)** Licensed

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://donavon.com"><img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt=""/><br /><sub><b>Donavon West</b></sub></a><br /><a href="https://github.com/donavon/use-interval/commits?author=donavon" title="Code">💻</a> <a href="#infra-donavon" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/donavon/use-interval/commits?author=donavon" title="Tests">⚠️</a> <a href="#example-donavon" title="Examples">💡</a> <a href="#maintenance-donavon" title="Maintenance">🚧</a> <a href="https://github.com/donavon/use-interval/pulls?q=is%3Apr+reviewed-by%3Adonavon" title="Reviewed Pull Requests">👀</a> <a href="#tool-donavon" title="Tools">🔧</a></td>
    <td align="center"><a href="http://twitter.com/dan_abramov"><img src="https://avatars0.githubusercontent.com/u/810438?v=4" width="100px;" alt=""/><br /><sub><b>Dan Abramov</b></sub></a><br /><a href="https://github.com/donavon/use-interval/commits?author=gaearon" title="Code">💻</a> <a href="#blog-gaearon" title="Blogposts">📝</a> <a href="#ideas-gaearon" title="Ideas, Planning, & Feedback">🤔</a> <a href="#tutorial-gaearon" title="Tutorials">✅</a></td>
    <td align="center"><a href="http://michaelsync.net"><img src="https://avatars1.githubusercontent.com/u/192911?v=4" width="100px;" alt=""/><br /><sub><b>Michael Sync</b></sub></a><br /><a href="https://github.com/donavon/use-interval/issues?q=author%3Amichaelsync" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://onetwo.ren"><img src="https://avatars1.githubusercontent.com/u/3746270?v=4" width="100px;" alt=""/><br /><sub><b>lin onetwo</b></sub></a><br /><a href="https://github.com/donavon/use-interval/commits?author=linonetwo" title="Code">💻</a> <a href="https://github.com/donavon/use-interval/issues?q=author%3Alinonetwo" title="Bug reports">🐛</a></td>
    <td align="center"><a href="http://daniel-lauzon.com/"><img src="https://avatars0.githubusercontent.com/u/326183?v=4" width="100px;" alt=""/><br /><sub><b>Daniel Lauzon</b></sub></a><br /><a href="https://github.com/donavon/use-interval/commits?author=daneroo" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

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