react-timers-hooks

React Timers Hooks

The useInterval/useTimeout custom React hooks accepts 2 arguments - your callback function and delay value which can be a Number or null.

When delay is set to null the timer is cleared, Number value represents timeout in milliseconds.
When delay has changed during the countdown, the tick resets and starts again with new delay value.

Built with TypeScript.

Installation

npm i react-timers-hooks

or

yarn add react-timers-hooks  

Basic usage

import { useInterval, useTimeout } from "react-timers-hooks";

...
useInterval (
    () => {
        doSomething();
    },
    5000
);

useTimeout (
    () => {
        doSomething2();
    },
    2000,
);

Usage with conditionals

import { useInterval, useTimeout } from "react-timers-hooks";

...
const [interval, setInterval] = useState(false);
const [waitAndGo, waitAndGo] = useState(false);

useInterval (
    () => {
        doSomething();
    },
    interval ? 5000 : null,
);

useTimeout (
    () => {
        doSomething2();
    },
    waitAndGo ? 2000 : null,
);

License

MIT