use-interval
Install
npm install --save @khalidalansi/use-interval
yarn add @khalidalansi/use-interval
Usage
import * as React from 'react'
import useInterval from '@khalidalansi/use-interval'
const Example = () => {
let [count, setCount] = React.useState(0);
useInterval(() => {
// Your custom logic here
setCount(count + 1);
}, 1000); // passing null instead of 1000 will cancel the interval if it is already running
return <h1>{count}</h1>;
}
// TypeScript Declaration
useInterval(
callback: () => void,
delay: number,
immediate?: boolean /* called when mounted if true */
)
Pausing and Reseting the counter example
import * as React from 'react'
import useInterval from '@khalidalansi/use-interval'
const App = () => {
const [delay] = useState(1000);
const [count, setCount] = useState(0);
const [isRunning, setIsRunning] = useState(true);
useInterval(
() => {
setCount(count + 1);
},
isRunning ? delay : null
);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setIsRunning(!isRunning)}>
{isRunning ? "Stop" : "Start"}
</button>
</div>
);
};
License
MIT