# TAG Hooks
A Collection of React Hooks created by [@taglivros](https://site.taglivros.com/)

## useCountdown hook
this hook provides a simple countdown with hours, minutes and seconds

### Reference
#### Methods

| Method name                 | Arguments                                                             | Description                                                                                                                                          | Returns                                      |
| --------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| ```initializeCountdown()``` | hours_?: number; minutes_?: number; seconds_?: number  endTime?: date | Initializes the countdown with given values. You should use either ```endDate``` or ``` hours_ && minutes_ && seconds_ ``` in order to work properly | null                                         |
| ```startCountdown()```      | -                                                                     | Starts the countdown                                                                                                                                 | interval (to use with ```clearInterval()```) |
| ```setTimerError()```       | value: boolean                                                        | Changes the error state to given value                                                                                                               | null                                         |

#### Properties

| Property       | Description                    |
| -------------- | ------------------------------ |
| ```days```     | Current Countdown Days left    |
| ```hours```    | Current Countdown Hours left   |
| ```minutes```  | Current Countdown Minutes left |
| ```seconds```  | Current Countdown Seconds left |
| ```hasError``` | Indicates state of an error    |

### Usage

```javascript
import React, { useEffect } from 'react'
import { useCountdown } from '@taglivros/tag-hooks'

const App = () => {
  const {
    initializeCountdown,
    startCountdown,
    days,
    hours,
    minutes,
    seconds } = useCountdown()
  useEffect(() => {
    initializeCountdown({ endDate: new Date(2022, 5, 5, 5) })// insert here a valid date
    startCountdown()
  })

  return (
    <div>
      <h1>{days}</h1>
      <h1>{hours}</h1>
      <h1>{minutes}</h1>
      <h1>{seconds}</h1>
    </div>
  )
}
```
🚨 **Note:** You should wrap the component that uses ```useCountdown``` with ```<CountdownProvider>``` in an higher level due its useContext use:
```javascript
import React from 'react'
import { CountdownProvider } from '@taglivros/tag-hooks'

const AppWrapper = () => {
  return (
    <CountdownProvider>
      <App />
    </CountdownProvider>
  )
}
```