Package Exports

@use-it/interval

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@use-it/interval) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

$ 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;