vue-timer-hook

Vue timer hook is a custom vue 3 hook, built to handle timer, stopwatch, and time logic/state in your vue component.

1. useTimer: Timers (countdown timer)
2. useStopwatch: Stopwatch (count up timer)
3. useTime: Time (return current time)

---

Setup

``bash
bun add vue-timer-hook


or

pnpm add vue-timer-hook

or

yarn add vue-timer-hook

or

npm install vue-timer-hook
`

---

useTimer - Demo

$3

`html



`

$3

| key | Type | Required | Description |
| --------------- | ----------------- | -------- | ---------------------------------------------------------------------------------- |
| expiryTimestamp | number(timestamp) | YES | this will define for how long the timer will be running |
| autoStart | boolean | No | flag to decide if timer should start automatically, by default it is set to true |

$3

| key | Type | Description |
| --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| seconds | number | seconds value |
| minutes | number | minutes value |
| hours | number | hours value |
| days | number | days value |
| isRunning | boolean | flag to indicate if timer is running or not |
| pause | function | function to be called to pause timer |
| start | function | function if called after pause the timer will continue based on original expiryTimestamp |
| resume | function | function if called after pause the timer will continue countdown from last paused state |
| restart | function | function to restart timer with new expiryTimestamp, accept 2 arguments first is the new expiryTimestamp of type number(timestamp) and second is autoStart of type boolean to decide if it should automatically start after restart or not, default is true |

---

useStopwatch - Demo

$3

`html



`

$3

| key | Type | Required | Description |
| --------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autoStart | boolean | No | if set to true stopwatch will auto start, by default it is set to false |
| offsetTimestamp | number | No | this will define the initial stopwatch offset example: const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300); this will result in a 5 minutes offset and stopwatch will start from 0:0:5:0 instead of 0:0:0:0 |

$3

| key | Type | Description |
| --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| seconds | number | seconds value |
| minutes | number | minutes value |
| hours | number | hours value |
| days | number | days value |
| isRunning | boolean | flag to indicate if stopwatch is running or not |
| start | function | function to be called to start/resume stopwatch |
| pause | function | function to be called to pause stopwatch |
| reset | function | function to be called to reset stopwatch to 0:0:0:0, you can also pass offset parameter to this function to reset stopwatch with offset, similar to how offsetTimestamp will offset the initial stopwatch time, this function will accept also a second argument which will decide if stopwatch should automatically start after reset or not default is true |

---

useTime - Demo

$3

`html



`

$3

| key | Type | Required | Description |
| ------ | ------ | -------- | ----------------------------------------------------- |
| format | string | No | if set to 12-hour time will be formatted with am/pm |

$3

| key | Type | Description |
| ------- | ------ | --------------------------------------- |
| seconds | number | seconds value |
| minutes | number | minutes value |
| hours | number | hours value |
| ampm | string | am/pm value if 12-hour` format is used |

$3

Inspired by react-timer-hook