Socket
Socket
Sign inDemoInstall

vue-timer-hook

Package Overview
Dependencies
21
Maintainers
1
Versions
83
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-timer-hook

Vue timer hook is a custom [vue 3 hook](https://vue.org/docs/hooks-intro.html), built to handle timer, stopwatch, and time logic/state in your vue component.


Version published
Maintainers
1
Weekly downloads
2,400
increased by1.61%

Weekly downloads

Readme

Source

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

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

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

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

keyTypeRequiredDescription
autoStartbooleanNoif set to true stopwatch will auto start, by default it is set to false
offsetTimestampnumberNothis 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

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
isRunningbooleanflag to indicate if stopwatch is running or not
startfunctionfunction to be called to start/resume stopwatch
pausefunctionfunction to be called to pause stopwatch
resetfunctionfunction 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

keyTypeRequiredDescription
formatstringNoif set to 12-hour time will be formatted with am/pm

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
ampmstringam/pm value if 12-hour format is used

Credit

Inspired by react-timer-hook

Keywords

FAQs

Last updated on 22 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc