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

CodeSandbox

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