react-countdown-hook

!react-countdown-hook

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}

Restart counter with 42 seconds


);
}
`

Note that this is a very basic usage. Check out more usage examples
in playground
or in the demo project

Documentation

$3

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