@use-it/interval
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

@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!

Package Sidebar

Install

npm i @use-it/interval

Weekly Downloads

22,663

Version

1.0.0

License

MIT

Unpacked Size

14.4 kB

Total Files

12

Last publish

Collaborators

  • donavon