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

    Install

    npm i @use-it/interval

    DownloadsWeekly Downloads

    13,119

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    14.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • donavon