https://github.com/donavon/use-interval

A custom React Hook that provides a declarative setInterval called useInterval.
https://github.com/donavon/use-interval

hooks react reactjs

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/donavon/use-interval
• Owner: donavon
• License: mit
• Created: 2019-02-13T13:43:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T16:30:36.000Z (almost 3 years ago)
• Last Synced: 2024-10-12T08:11:18.732Z (12 months ago)
• Topics: hooks, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 2.27 MB
• Stars: 161
• Watchers: 3
• Forks: 22
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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!

[![npm version](https://badge.fury.io/js/%40use-it%2Finterval.svg)](https://badge.fury.io/js/%40use-it%2Finterval)

[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)

This hook is an implementation of [Dan Abramov](https://github.com/gaearon)'s blog post

["Making setInterval Declarative with React Hooks"](https://overreacted.io/making-setinterval-declarative-with-react-hooks/).

## Installation

```bash

$ npm i @use-it/interval

```

or

```bash

$ yarn add @use-it/interval

```

## Usage

Here is a basic setup.

```js

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.

```js

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 
{count}
;

};


export default Counter;

```

## Live demo

You can view/edit the sample code above on CodeSandbox.

[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2n542qnzr)

## License

**[MIT](LICENSE)** Licensed

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Donavon West
💻 🚇 ⚠️ 💡 🚧 👀 🔧

    
Dan Abramov
💻 📝 🤔 ✅

    
Michael Sync
🐛

    
lin onetwo
💻 🐛

    
Daniel Lauzon
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!