Awesome
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.
useTimer: Timers (countdown timer)useStopwatch: Stopwatch (count up timer)useTime: Time (return current time)
Setup
yarn add vue-timer-hook OR npm install vue-timer-hook
useTimer - Demo
Example
<template>
<div>
<h1>vue-timer-hook </h1>
<p>Timer Demo</p>
<div>
<span>{{timer.days}}</span>:<span>{{timer.hours}}</span>:<span>{{timer.minutes}}</span>:<span>{{timer.seconds}}</span>
</div>
<p>{{timer.isRunning ? 'Running' : 'Not running'}}</p>
<button @click="timer.start()">Start</button>
<button @click="timer.pause()">Pause</button>
<button @click="timer.resume()">Resume</button>
<button @click="restartFive()">Restart</button>
</div>
</template>
<script setup lang="ts">
import { watchEffect, onMounted } from "vue";
import { useTimer } from 'vue-timer-hook';
const time = new Date();
time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
const timer = useTimer(time);
const restartFive = () => {
// Restarts to 5 minutes timer
const time = new Date();
time.setSeconds(time.getSeconds() + 300);
timer.restart(time);
}
onMounted(() => {
watchEffect(async () => {
if(timer.isExpired.value) {
console.warn('IsExpired')
}
})
})
</script>
Settings
| 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 |
Values
| 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
Example
<template>
<div>
<h1>vue-timer-hook </h1>
<p>Stopwatch Demo</p>
<div>
<span>{{stopwatch.days}}</span>:<span>{{stopwatch.hours}}</span>:<span>{{stopwatch.minutes}}</span>:<span>{{stopwatch.seconds}}</span>
</div>
<p>{{stopwatch.isRunning ? 'Running' : 'Not running'}}</p>
<button @click="stopwatch.start()">Start</button>
<button @click="stopwatch.pause()">Pause</button>
<button @click="stopwatch.reset()">Reset</button>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { useStopwatch } from 'vue-timer-hook';
const autoStart = true;
const stopwatch = useStopwatch(autoStart);
</script>
Settings
| 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 |
Values
| 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
Example
<template>
<div>
<h1>vue-timer-hook </h1>
<p>Current Time Demo</p>
<div>
<span>{{time.hours}}</span>:<span>{{time.minutes}}</span>:<span>{{time.seconds}}</span><span>{{time.ampm}}</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useTime } from 'vue-timer-hook';
export default defineComponent({
name: "Home",
setup() {
const format = '12-hour'
const time = useTime(format);
return {
time,
};
},
});
</script>
Settings
| key | Type | Required | Description |
|---|
| format | string | No | if set to 12-hour time will be formatted with am/pm |
Values
| 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 |
Credit
Inspired by react-timer-hook