Dead simple yet powerful countdown hook for React. Powered by requestAnimationFrame.
## Installation
Using npm:
```sh
$ npm install --save react-countdown-hook
```
Using yarn:
```sh
$ yarn add react-countdown-hook
```
## Quick Start
```javascript
import React from 'react';
import useCountDown from 'react-countdown-hook';
const initialTime = 60 * 1000; // initial time in milliseconds, defaults to 60000
const interval = 1000; // interval to change remaining time amount, defaults to 1000
const render = () => {
const [timeLeft, { start, pause, resume, reset }] = useCountDown(initialTime, interval);
// start the timer during the first render
React.useEffect(() => {
start();
}, []);
const restart = React.useCallback(() => {
// you can start existing timer with an arbitrary value
// if new value is not passed timer will start with initial value
const newTime = 42 * 1000;
start(newTime);
}, []);
return (
<>
Time left: {timeLeft}
);
}
```
Note that this is a very basic usage. Check out more usage examples
[in playground](https://stackblitz.com/edit/react-use-count-down?file=index.js "react-countdown-hook on stackblitz")
or [in the demo project](./demo/index.js "react-countdown-hook demo project")
## Documentation
### [timeLeft, actions] = useCountDown(timeToCount, interval)
#### Parameters
Takes a default countdown time and interval time.
* `timeToCount` {`Number`} Time in milliseconds that countdown should start with. **Defaults to `60000`**
* `interval` {`Number`} Time in milliseconds representing the frequency that countdown should update with. **Defaults to `1000`**
#### Return value
Returns an array with remaining time and actions object.
* `timeLeft` {`Number`} Remaining countdown time in milliseconds
* `actions.start` {`Function`} Start or restart a countdown. Takes time in milliseconds to start with.
* `actions.reset` {`Function`} Resets a countdown to initial state
* `actions.pause` {`Function`} Pauses a countdown
* `actions.resume` {`Function`} Resumes a paused countdown
## Contributing
Feel free to submit any issues or pull requests.
## License
MIT
---
_Source: https://npm.io/package/react-countdown-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
