use-timer

React hook that returns a timer's remaining span as a formatted time string, e.g. 65 -> "01:05", as well as numerically.

- use-timer
- Table of Contents
- Installation
- Usage
- Configuration
- Properties
- TypeScript Support
- License

---

Installation

Install through your package manager of choice (npm, yarn, etc.)

``npm -i @mzaleski/use-timer`

`yarn add @mzaleski/use-timer`

`Usage`

`jsx import { useTimer } from '@mzaleski/use-timer';

function Component(props) { const { timeRemaining, secondsRemaining, setFreeze, resetTimer } = useTimer(65, false, () => console.log('Timer finished!') );

return (


      Time remaining: {timeRemaining}

      Seconds remaining: {secondsRemaining}


  );
}


$3
The hook's configuration options are as follows:

| Name | Type | Description | | ---------------- | -------- | ------------------------------------------ | |initialSeconds| Number | Initial (remaining) time in seconds | |initialFreeze| Boolean | Initial freeze state | |onCompleted | Function | A hook called once the timer has completed |

`$3`

The hook returns the following properties:

| Name | Type | Description | | ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------ | |timeRemaining| String | The time remaining as a formatted string, e.g. "01:05" | |secondsRemaining| Number | The time remaining as seconds | |isFrozen| Boolean | Whether the timer is frozen | |setFreeze| Function | A setter for the timer's freeze state | |resetTimer | Function | A function to force-reset the timer – takes the freeze` parameter which dictates whether to start the timer upon reset. |

TypeScript Support

You will find a collection of typings bundled with the package.

License

Usage

jsx
import { useTimer } from '@mzaleski/use-timer';

function Component(props) {
  const { timeRemaining, secondsRemaining, setFreeze, resetTimer } = useTimer(65, false,                               
    () => console.log('Timer finished!') 
  );

  return (


      Time remaining: {timeRemaining}

      Seconds remaining: {secondsRemaining}

);
}

$3

The hook's configuration options are as follows:

| Name             | Type     | Description                                |
| ---------------- | -------- | ------------------------------------------ |
|

initialSeconds

 | Number   | Initial (remaining) time in seconds        |
|

initialFreeze

  | Boolean  | Initial freeze state                       |
|

onCompleted | Function | A hook called once the timer has completed |

$3

The hook returns the following properties:

| Name               | Type     | Description                                                                                                              |
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------ |
|

timeRemaining

    | String   | The time remaining as a formatted string, e.g. "01:05"                                                                   |
|

secondsRemaining

 | Number   | The time remaining as seconds                                                                                            |
|

isFrozen

         | Boolean  | Whether the timer is frozen                                                                                              |
|

setFreeze

        | Function | A setter for the timer's freeze state                                                                                    |
|

resetTimer | Function | A function to force-reset the timer – takes the freeze` parameter which dictates whether to start the timer upon reset. |