riderx / vue-timer-hook

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. • : Timers (countdown timer) • : Stopwatch (count up timer) • : Time (return current time) --- Setup --- • Demo Example 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 | 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 of type number(timestamp) and second is of type boolean to decide if it should automatically start after restart or not, default is | --- • Demo Example Settings | key | Type | Required | Description | | --------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | autoStart | boolean | No | if set to stopwatch will auto start, by default it is set to | | offsetTimestamp | number | No | this will define the initial stopwatch offset example: 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 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 | --- • Demo Example Settings | key | Type | Required | Description | | ------ | ------ | -------- | ----------------------------------------------------- | | format | string | No | if set to 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 format is used | Credit Inspired by react-timer-hook