https://github.com/alexkhismatulin/react-use-count-down

Dead simple yet powerful countdown hook for React.
https://github.com/alexkhismatulin/react-use-count-down

Last synced: about 2 months ago
JSON representation

Dead simple yet powerful countdown hook for React.

• Host: GitHub
• URL: https://github.com/alexkhismatulin/react-use-count-down
• Owner: alexkhismatulin
• License: mit
• Created: 2019-05-31T12:43:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-01T02:06:43.000Z (7 months ago)
• Last Synced: 2024-07-18T20:35:14.440Z (2 months ago)
• Language: JavaScript
• Homepage: https://stackblitz.com/edit/react-use-count-down
• Size: 1.77 MB
• Stars: 76
• Watchers: 1
• Forks: 20
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-countdown-hook`
• awesome-react-hooks-cn - `react-countdown-hook`
• awesome-react-hooks - `react-countdown-hook`
• awesome-react-hooks - `react-countdown-hook`

README

        
![react-countdown-hook](./assets/cover.png)

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](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