https://github.com/bsonntag/react-use-countdown
React hook for countdown state.
https://github.com/bsonntag/react-use-countdown
countdown hook react react-hooks
Last synced: 3 months ago
JSON representation
React hook for countdown state.
- Host: GitHub
- URL: https://github.com/bsonntag/react-use-countdown
- Owner: bsonntag
- License: mit
- Created: 2018-10-27T20:35:17.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-10-27T13:32:20.000Z (almost 2 years ago)
- Last Synced: 2025-06-16T17:59:48.933Z (4 months ago)
- Topics: countdown, hook, react, react-hooks
- Language: JavaScript
- Size: 1.85 MB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-countdown
[](https://circleci.com/gh/bsonntag/react-use-countdown)
React Hook for countdown state.
## Installation
Using npm:
```sh
$ npm install --save react-use-countdown
```
Using yarn:
```sh
$ yarn add react-use-countdown
```
Since this module uses React's new [Hooks feature](https://reactjs.org/docs/hooks-intro.html),
to try this out you'll need to install at least version `16.8.0`
of `react` and `react-dom`:
```sh
$ yarn add react@^16.8.0 react-dom@^16.8.0
```
## Usage
```js
import React from 'react';
import parseMs from 'parse-ms';
import useCountdown from 'react-use-countdown';
function Example() {
const countdown = useCountdown(() => Date.now() + 10000);
const { seconds } = parseMs(countdown);
return
Hooked in {seconds}
;
}
```
## API
```js
useCountdown(
date: () => Date | string | number,
options?: {
intervalTime?: number,
now?: () => Date | string | number
}
): number
```
Receives a function that returns a date and returns the number of milliseconds remaining until that date.
Optionally receives:
- `intervalTime`: the milliseconds between ticks, 1000 by default.
- `now`: a function that returns the current time as the second argument.
## Contributing
Please feel free to submit any issues or pull requests.
## License
MIT