Press "Enter" to skip to content

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

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

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

keyTypeRequiredDescription
expiryTimestampnumber(timestamp)YESthis will define for how long the timer will be running
autoStartbooleanNoflag to decide if timer should start automatically, by default it is set to true

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
isRunningbooleanflag to indicate if timer is running or not
pausefunctionfunction to be called to pause timer
startfunctionfunction if called after pause the timer will continue based on original expiryTimestamp
resumefunctionfunction if called after pause the timer will continue countdown from last paused state
restartfunctionfunction 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

Countdown/Countup Timer Hooks, vue timer hook Plugin/Github, countdown timer jquery


See Demo And Download

Official Website(riderx): Click Here

This superior jQuery/javascript plugin is developed by riderx. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.