use-timers-hooks
v1.0.2
Published
Custom Hooks to schedule execution of functions based on the timeout or interval passed.
Downloads
3
Maintainers
Readme
use-timers-hooks
Custom Hooks to schedule execution of functions based on the timeout or interval passed.
Install
npm install use-timers-hooks
Usage
import { useState } from "react";
import { useInterval, useTimeout } from "use-timers-hooks";
function MyTimerComponent() {
const [count, setCount] = useState(0);
const [timeoutText, setTimeoutText] = useState(null);
const { stopInterval } = useInterval((arg) => setCount(arg), 4000, [
count + 1
]);
const { stopTimeout } = useTimeout(
(text) => {
setTimeoutText(text);
},
3000,
["Timeout Callback Executed"]
);
/* PS: If you are using both interval and timeout together,
make sure that your execution thread is not blocked */
return (
<div className="App">
<div>
<button type="button" onClick={stopInterval}>
Stop Interval
</button>
<strong>Count: {count}</strong>
</div>
<br />
<div>
<button type="button" onClick={stopTimeout}>
Stop Timeout
</button>
{timeoutText && <strong>{timeoutText}</strong>}
</div>
</div>
);
}
Examples
To play around with these hooks, try these interactive sample apps
Parameters
All the hooks will take below parameters
| Param | Type | Optional | Default | Description | | --- | :---: | :---: | :---: | --- | | callback | Function | No | - | The callback function to be executed once the timeout/interval has passed | | time | Number | No | - | Time duration for the timeout/interval in milliseconds | | args | Array | Yes | - | Array of args to be passed to the callback |
Returns
An object containing below properties
| Prop | Return Type | Description | | --- | :---: | --- | | stopInterval/stopTimeout | Function | The helper functions to end the interval/timeout programmatically |
Signature
const { stopInterval } = useInterval(callback, time, args);
const { stopTimeout } = useTimeout(callback, time, args);
License
MIT © mayank8aug