# react-better-countdown-hook

> A dead simple react countdown hook with typescript support

Latest version **1.0.4** (published 2021-02-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-better-countdown-hook
pnpm add react-better-countdown-hook
yarn add react-better-countdown-hook
bun add react-better-countdown-hook
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-02-07 |
| First published | 2021-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | steviekong |
| Maintainers | steviekong |
| Keywords | countdown, hook, timer, react, typescript, react-hooks, react-use-countdown, useCountdown |

## Links

- npm: https://www.npmjs.com/package/react-better-countdown-hook
- Repository: https://github.com/steviekong/react-countdown-hook
- Homepage: https://github.com/steviekong/react-countdown-hook#readme
- Issues: https://github.com/steviekong/react-countdown-hook/issues
- npm.io page: https://npm.io/package/react-better-countdown-hook

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2021-02-07
- 1.0.3 — 2021-02-07
- 1.0.2 — 2021-02-07
- 1.0.1 — 2021-02-07
- 1.0.0 — 2021-02-06

## README

# Better React Countdown Hook

Super simple and lightweight countdown timer hook with most of the functionality you would need.

Built with typescript :)

The aim of the library is to remain as small as possible.

## Installation

Using npm:

```bash
$ npm install --save react-better-countdown-hook
```

Using yarn:

```bash
$ yarn add react-better-countdown-hook
```

## Quick Start/ Example

```js
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import useCountDown from "react-better-countdown-hook";

const App: React.FunctionComponent = () => {
  const [
    { milliseconds, seconds, minutes, hours, days },
    { start, reset, pause },
  ] = useCountDown({
    // Start time in milliseconds
    startTimeMilliseconds: 6000,
    // Decrement to update the timer with
    interval: 500,
    // Callback triggered when the timer reaches 0
    onCountDownEnd: () => {
      console.log("ended");
    },
  });

  return (
    <>
      <div>
        <p>
          Milliseconds: {milliseconds} Second: {seconds} Minute: {minutes}
          Hours: {hours} Days: {days}
          <button onClick={start}>start</button>
          <button onClick={reset}>reset </button>
          <button onClick={pause}>pause</button>
        </p>
      </div>
    </>
  );
};

const MOUNT_NODE = document.getElementById("react-root");
ReactDOM.render(<App />, MOUNT_NODE);
```

## Documentation

```js
const [
  /** Time in milliseconds, seconds, minutes, hours, days */
  { milliseconds, seconds, minutes, hours, days },
  { start, reset, pause },
] = useCountDown({
  // Start time in milliseconds
  startTimeMilliseconds: 6000,
  // Decrement to update the timer with
  interval: 500,
  // Callback triggered when the timer reaches 0
  onCountDownEnd: () => {
    console.log("ended");
  },
});
```

## Configuration

| Property              | Type     | Is Optional | Description                                  |
| --------------------- | -------- | ----------- | -------------------------------------------- |
| milliseconds          | number   | true        | Current timer value in milliseconds          |
| seconds               | number   | true        | Current timer value in seconds               |
| minutes               | number   | true        | Current timer value in minutes               |
| hours                 | number   | true        | Current timer value in hours                 |
| days                  | number   | true        | Current timer value in days                  |
| start                 | function | true        | Function to start the timer                  |
| pause                 | function | true        | Function to pause/stop the timer             |
| reset                 | function | true        | Function to pause and then reset the timer   |
| startTimeMilliseconds | number   | false       | Start time of the timer in milliseconds      |
| interval              | number   | false       | Value to decrement                           |
| onCountDownEnd        | function | true        | Callback to trigger when the timer reaches 0 |

## License

MIT

---
_Source: https://npm.io/package/react-better-countdown-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._