# use-countdown-hook

> React Countdown hook

Latest version **2.1.0** (published 2021-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-countdown-hook
pnpm add use-countdown-hook
yarn add use-countdown-hook
bun add use-countdown-hook
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2021-04-02 |
| First published | 2021-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | liyiming22 |

## Links

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

## Recent versions

- 2.1.0 (latest) — 2021-04-02
- 2.0.2 — 2021-03-29
- 2.0.1 — 2021-03-29
- 2.0.0 — 2021-03-29
- 1.0.2 — 2021-02-23
- 1.0.1 — 2021-02-23
- 1.0.0 — 2021-02-23

## README

<h1 align="center">React Countdown hook</h1>

<p align="center">Dead simple React countdown hook which will return the remain time in the dd:hh:mm:ss format implemented by <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></p>

<p align="center">
  <a href="https://github.com/liyiming22/react-countdown-hook/actions">
    <img src="https://github.com/liyiming22/react-countdown-hook/workflows/Build/badge.svg" />
  </a>
  <a href="https://www.npmjs.com/package/use-countdown-hook">
    <img src="https://img.shields.io/npm/v/use-countdown-hook.svg" />
  </a>
  <a href="https://github.com/liyiming22/react-countdown-hook/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
  </a>
  <!-- <a href="https://app.codecov.io/gh/liyiming22/react-countdown-hook">
    <img src="https://codecov.io/gh/liyiming22/react-countdown-hook/branch/master/graph/badge.svg" />
  </a> -->
  <a href="https://www.npmjs.com/package/use-countdown-hook">
    <img src="https://img.shields.io/npm/dm/use-countdown-hook.svg" alt="npm downloads" />
  </a>
  <a href="https://badgen.net/bundlephobia/min/use-countdown-hook?label=size">
    <img src="https://badgen.net/bundlephobia/min/use-countdown-hook?label=size" />
  </a>
</p>
</p>

[简体中文](README.zh_CN.md) | English
## Install
```bash
yarn add use-countdown-hook
```
or
```bash
npm install use-countdown-hook
```
## Usage
```jsx
import { useCountDown } from 'use-countdown-hook'

const onTimeOver = useCallback(
  () => {
    console.log('time over...')
  },
[])

const [{ dd, hh, mm, ss }, { start, pause }] = useCountDown(60 * 1000, {
  startImmediately: false,
  onTimeOver
})

return (
  <>
    <p>
      <span>{ dd }Days</span>
      <span>{ hh }Hours</span>
      <span>{ mm }Minutes</span>
      <span>{ ss }Seconds</span>
    </p>
    <button onClick={ start }>Start</button>
    <button onClick={ pause }>Pause</button>
  </>
)
```

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