@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

$ npm i @use-it/interval

or

$ yarn add @use-it/interval

Usage

Here is a basic setup.

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.

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.

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!