{"id":13818739,"url":"https://github.com/riderx/vue-timer-hook","last_synced_at":"2025-04-13T10:44:03.954Z","repository":{"id":36985035,"uuid":"393392608","full_name":"riderx/vue-timer-hook","owner":"riderx","description":"Vue timer hook is a custom hook, built to handle timer, stopwatch, and time logic/state in your vue 3 component.","archived":false,"fork":false,"pushed_at":"2024-05-29T04:47:25.000Z","size":1217,"stargazers_count":169,"open_issues_count":11,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-29T07:43:43.691Z","etag":null,"topics":["composition-api","hook","timer","vue3"],"latest_commit_sha":null,"homepage":"https://riderx.github.io/vue-timer-hook/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/riderx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/contributing.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"riderx"}},"created_at":"2021-08-06T13:55:52.000Z","updated_at":"2024-06-04T02:40:44.766Z","dependencies_parsed_at":"2023-10-16T11:38:58.457Z","dependency_job_id":"a3a882f4-65cc-4a9b-a50a-1f025b4435c9","html_url":"https://github.com/riderx/vue-timer-hook","commit_stats":null,"previous_names":[],"tags_count":112,"template":false,"template_full_name":"posva/vue-ts-lib","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderx%2Fvue-timer-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderx%2Fvue-timer-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderx%2Fvue-timer-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderx%2Fvue-timer-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riderx","download_url":"https://codeload.github.com/riderx/vue-timer-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248702057,"owners_count":21148114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","hook","timer","vue3"],"created_at":"2024-08-04T08:00:27.045Z","updated_at":"2025-04-13T10:44:03.934Z","avatar_url":"https://github.com/riderx.png","language":"TypeScript","readme":"## vue-timer-hook\n\nVue 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.\n\n1. `useTimer`: Timers (countdown timer)\n2. `useStopwatch`: Stopwatch (count up timer)\n3. `useTime`: Time (return current time)\n\n---\n\n## Setup\n\n`yarn add vue-timer-hook` OR `npm install vue-timer-hook`\n\n---\n\n## `useTimer` - [Demo](https://riderx.github.io/vue-timer-hook/)\n\n### Example\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003ch1\u003evue-timer-hook \u003c/h1\u003e\n        \u003cp\u003eTimer Demo\u003c/p\u003e\n        \u003cdiv\u003e\n            \u003cspan\u003e{{timer.days}}\u003c/span\u003e:\u003cspan\u003e{{timer.hours}}\u003c/span\u003e:\u003cspan\u003e{{timer.minutes}}\u003c/span\u003e:\u003cspan\u003e{{timer.seconds}}\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp\u003e{{timer.isRunning ? 'Running' : 'Not running'}}\u003c/p\u003e\n        \u003cbutton @click=\"timer.start()\"\u003eStart\u003c/button\u003e\n        \u003cbutton @click=\"timer.pause()\"\u003ePause\u003c/button\u003e\n        \u003cbutton @click=\"timer.resume()\"\u003eResume\u003c/button\u003e\n        \u003cbutton @click=\"restartFive()\"\u003eRestart\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\n\u003cscript setup lang=\"ts\"\u003e\nimport {  watchEffect, onMounted } from \"vue\";\nimport { useTimer } from 'vue-timer-hook';\n\nconst time = new Date();\ntime.setSeconds(time.getSeconds() + 600); // 10 minutes timer\nconst timer = useTimer(time);\nconst restartFive = () =\u003e {\n    // Restarts to 5 minutes timer\n    const time = new Date();\n    time.setSeconds(time.getSeconds() + 300);\n    timer.restart(time);\n}\nonMounted(() =\u003e {\n  watchEffect(async () =\u003e {\n    if(timer.isExpired.value) {\n        console.warn('IsExpired')\n    }\n  })\n})\n\u003c/script\u003e\n```\n\n### Settings\n\n| key | Type | Required | Description |\n| --- | --- | --- | ---- |\n| expiryTimestamp | number(timestamp) | YES | this will define for how long the timer will be running   |\n| autoStart | boolean | No | flag to decide if timer should start automatically, by default it is set to `true` |\n\n\n### Values\n\n| key | Type | Description |\n| --- | --- | ---- |\n| seconds | number | seconds value |\n| minutes | number | minutes value |\n| hours | number | hours value |\n| days | number | days value |\n| isRunning | boolean | flag to indicate if timer is running or not |\n| pause | function | function to be called to pause timer |\n| start | function | function if called after pause the timer will continue based on original expiryTimestamp |\n| resume | function | function if called after pause the timer will continue countdown from last paused state |\n| 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` |\n\n\n---\n\n## `useStopwatch` - [Demo](https://riderx.github.io/vue-timer-hook/)\n\n### Example\n\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003ch1\u003evue-timer-hook \u003c/h1\u003e\n        \u003cp\u003eStopwatch Demo\u003c/p\u003e\n        \u003cdiv\u003e\n            \u003cspan\u003e{{stopwatch.days}}\u003c/span\u003e:\u003cspan\u003e{{stopwatch.hours}}\u003c/span\u003e:\u003cspan\u003e{{stopwatch.minutes}}\u003c/span\u003e:\u003cspan\u003e{{stopwatch.seconds}}\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp\u003e{{stopwatch.isRunning ? 'Running' : 'Not running'}}\u003c/p\u003e\n        \u003cbutton @click=\"stopwatch.start()\"\u003eStart\u003c/button\u003e\n        \u003cbutton @click=\"stopwatch.pause()\"\u003ePause\u003c/button\u003e\n        \u003cbutton @click=\"stopwatch.reset()\"\u003eReset\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { defineComponent } from \"vue\";\nimport { useStopwatch } from 'vue-timer-hook';\n\nconst autoStart = true;\nconst stopwatch = useStopwatch(autoStart);\n\u003c/script\u003e\n```\n\n### Settings\n\n| key | Type | Required | Description |\n| --- | --- | --- | ---- |\n| autoStart | boolean | No | if set to `true` stopwatch will auto start, by default it is set to `false` |\n| 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 |\n\n### Values\n\n| key | Type | Description |\n| --- | --- | ---- |\n| seconds | number | seconds value |\n| minutes | number | minutes value |\n| hours | number | hours value |\n| days | number | days value |\n| isRunning | boolean | flag to indicate if stopwatch is running or not |\n| start | function | function to be called to start/resume stopwatch |\n| pause | function | function to be called to pause stopwatch |\n| 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` |\n\n\n---\n\n\n## `useTime` - [Demo](https://riderx.github.io/vue-timer-hook/)\n\n### Example\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003ch1\u003evue-timer-hook \u003c/h1\u003e\n        \u003cp\u003eCurrent Time Demo\u003c/p\u003e\n        \u003cdiv\u003e\n            \u003cspan\u003e{{time.hours}}\u003c/span\u003e:\u003cspan\u003e{{time.minutes}}\u003c/span\u003e:\u003cspan\u003e{{time.seconds}}\u003c/span\u003e\u003cspan\u003e{{time.ampm}}\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from \"vue\";\nimport { useTime } from 'vue-timer-hook';\n\nexport default defineComponent({\n  name: \"Home\",\n  setup() {\n    const format = '12-hour'\n    const time = useTime(format);\n    return {\n        time,\n     };\n  },\n});\n\u003c/script\u003e\n```\n### Settings\n\n| key | Type | Required | Description |\n| --- | --- | --- | ---- |\n| format | string | No | if set to `12-hour` time will be formatted with am/pm |\n\n### Values\n\n| key | Type | Description |\n| --- | --- | ---- |\n| seconds | number | seconds value |\n| minutes | number | minutes value |\n| hours | number | hours value |\n| ampm | string | am/pm value if `12-hour` format is used |\n\n\n\n### Credit\n\nInspired by [react-timer-hook](https://github.com/amrlabib/react-timer-hook)\n","funding_links":["https://github.com/sponsors/riderx"],"categories":["Packages","Components \u0026 Libraries"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friderx%2Fvue-timer-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friderx%2Fvue-timer-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friderx%2Fvue-timer-hook/lists"}