Javascript Countdown/Stopwatch Timer Hooks For Vue

Timer hook is a dedicated hook, designed to handle timer, stopwatch, and time logic/state in your Vue component.

full screen countdown timer, free countdown timer app download, countdown timer app javascript timer countdown with seconds, javascript countdown timer hours minutes seconds

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

Table of Contents

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-timer-hook

# NPM
$ npm i vue-timer-hook --save

1. Create a countdown timer with useTimer hook.

import { defineComponent, watchEffect, onMounted } from "vue";
import { useTimer } from 'vue-timer-hook';
export default defineComponent({
  name: "Home",
  setup() {
    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')
        }
      })
    })
    return {
        timer,
        restartFive,
     };
  },
});

<template>
  <div>
    <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>

2. Create a stopwatch with useStopwatch hook.

import { defineComponent } from "vue";
import { useStopwatch } from 'vue-timer-hook';
export default defineComponent({
  name: "Home",
  setup() {
    const autoStart = true;
    const stopwatch = useStopwatch(autoStart);
    return {
        stopwatch,
     };
  },
});

<template>
  <div>
    <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>

3. Handle the time case with the useTime hook.

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,
     };
  },
});

<template>
  <div>
    <div>
      <span>{{time.hours}}</span>:<span>{{time.minutes}}</span>:<span>{{time.seconds}}</span><span>{{time.ampm}}</span>
    </div>
  </div>
</template>

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`