@use-it/interval

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

> New version 1.0 has been completely rewritten in TypeScript!


This hook is an implementation of Dan Abramov's blog post
"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);
`

$3

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

$3

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

{count}

export default Counter;
``

Live demo

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


License

MIT Licensed

Contributors

Thanks goes to these wonderful people (emoji key):

Donavon West 💻 🚇 ⚠️ 💡 🚧 👀 🔧

Dan Abramov 💻 📝 🤔 ✅

Michael Sync 🐛

lin onetwo 💻 🐛

Daniel Lauzon 💻

This project follows the all-contributors specification. Contributions of any kind welcome!