Skip to content

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

License

Notifications You must be signed in to change notification settings

donavon/use-interval

Repository files navigation

@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 All Contributors

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.

Edit demo app 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!

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published