donavon / Use Interval
Licence: mit
A custom React Hook that provides a declarative setInterval called useInterval.
Stars: ✭ 127
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Use Interval
Rx React Container
Use RxJS in React components, via HOC or Hook
Stars: ✭ 105 (-17.32%)
Mutual labels: hooks
Clean State
🐻 A pure and compact state manager, using React-hooks native implementation, automatically connect the module organization architecture. 🍋
Stars: ✭ 107 (-15.75%)
Mutual labels: hooks
Reason Reactify
🚀 Transform a mutable tree into a functional React-like API
Stars: ✭ 102 (-19.69%)
Mutual labels: hooks
Ajax Hook
🔱 Intercepting browser's AJAX requests which made by XMLHttpRequest.
Stars: ✭ 1,900 (+1396.06%)
Mutual labels: hooks
Hooked Form
Performant 2KB React library to manage your forms
Stars: ✭ 110 (-13.39%)
Mutual labels: hooks
Lefthook
Fast and powerful Git hooks manager for any type of projects.
Stars: ✭ 1,848 (+1355.12%)
Mutual labels: hooks
Wshook
Easily intercept and modify WebSocket requests and message events.
Stars: ✭ 121 (-4.72%)
Mutual labels: hooks
Portfolio
💼 My personal portfolio built with React and three.js.
Stars: ✭ 106 (-16.54%)
Mutual labels: hooks
Use Is In Viewport
A react hook to find out if an element is in a given viewport with a simple api.
Stars: ✭ 129 (+1.57%)
Mutual labels: hooks
Git Good Commit
Git hook to help you write good commit messages, with no external dependencies.
Stars: ✭ 128 (+0.79%)
Mutual labels: hooks
@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
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.
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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].