react-timers-hooks

React reusable hooks for Timeout and Interval

Usage no npm install needed!

<script type="module">
  import reactTimersHooks from 'https://cdn.skypack.dev/react-timers-hooks';
</script>

README

React Timers Hooks npm version License TypeScript

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