# use-timers-hooks

> Custom Hooks to schedule execution of functions based on the timeout or interval passed.

Latest version **1.0.2** (published 2021-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-timers-hooks
pnpm add use-timers-hooks
yarn add use-timers-hooks
bun add use-timers-hooks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-04-24 |
| First published | 2021-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mayank8aug |
| Maintainers | mayank8aug |
| Keywords | hooks, react-hooks, custom hooks, useInterval, useTimeout, interval, timeout, setInterval, setTimeout, use-timers-hooks, use-timers, react-use-timers, react-use-timers-hooks |

## Links

- npm: https://www.npmjs.com/package/use-timers-hooks
- Repository: https://github.com/mayank8aug/use-timers-hooks
- Homepage: https://github.com/mayank8aug/use-timers-hooks#readme
- Issues: https://github.com/mayank8aug/use-timers-hooks/issues
- npm.io page: https://npm.io/package/use-timers-hooks

## Recent versions

- 1.0.2 (latest) — 2021-04-24
- 1.0.1 — 2021-04-13
- 1.0.0 — 2021-04-05

## README

# use-timers-hooks

> Custom Hooks to schedule execution of functions based on the timeout or interval passed.

[![NPM](https://img.shields.io/npm/v/use-timers-hooks.svg)](https://www.npmjs.com/package/use-timers-hooks) ![npm](https://img.shields.io/npm/dm/use-timers-hooks)

## Install

```bash
npm install use-timers-hooks
```

## Usage

```jsx
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](https://codesandbox.io/s/use-timers-hooks-bf9lw)


## 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

```js
const { stopInterval } = useInterval(callback, time, args);
const { stopTimeout } = useTimeout(callback, time, args);
```

## License

MIT © [mayank8aug](https://github.com/mayank8aug)

---
_Source: https://npm.io/package/use-timers-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._