vue-timer-hook - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #linux #docker #nodejs #java #awesome-list #security #mcp #openai

vue-timer-hook

(★ 182)

Vue timer hook is a custom hook, built to handle timer, stopwatch, and time logic/state in your vue 3 component.

File Explorer

Download Latest Version (.zip)

- - bump_version.yml
  - release-tag.yml
  - test.yml
- commit-convention.md
- contributing.md
- funding.yml
- commit-msg
- launch.json
- settings.json
- index.spec.ts
- - button.vue
  - CodeBlock.vue
  - digit.vue
  - timer.vue
  - UseStopwatchDemo.vue
  - UseTimeDemo.vue
  - UseTimerDemo.vue
  - UseTimerWaitStartDemo.vue
- App.vue
- index.html
- main.ts
- shim.d.ts
- tsconfig.json
- vite.config.js
- check-size.js
- deploy.js
- docs-check.sh
- release.sh
- rollup.config.js
- webRouter.js
- webRouterAndVue.js
- - index.ts
  - useInterval.ts
- - index.ts
  - Time.ts
  - Validate.ts
- global.d.ts
- index.ts
- useStopwatch.ts
- useTime.ts
- useTimer.ts
- index.d.ts
- tsconfig.json
- useStopwatch.test-d.ts
- useTime.test-d.ts
- useTimer.test-d.ts
.gitignore
api-extractor.json
bun.lock
CHANGELOG.md
circle.yml
commitlint.config.js
CONTRIBUTING.md
eslint.config.js
LICENSE
package.json
README.md
renovate.json
rollup.config.js
SECURITY.md
tsconfig.json
vitest.config.ts
vitest.setup.ts

# Installation Guide

1. Get the code

git clone https://github.com/riderx/vue-timer-hook

Downloads the entire project code from GitHub to your computer.

cd vue-timer-hook

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm add vue-timer-hook

Type this command into your terminal and run it.

yarn add vue-timer-hook

Type this command into your terminal and run it.

npm install vue-timer-hook

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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.

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

---

## Setup

```bash
bun add vue-timer-hook
# or
pnpm add vue-timer-hook
# or
yarn add vue-timer-hook
# or
npm install vue-timer-hook
```

---

## `useTimer` - [Demo](https://riderx.github.io/vue-timer-hook/)

### Example

```html
<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

| 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` |

---

## `useStopwatch` - [Demo](https://riderx.github.io/vue-timer-hook/)

### Example

```html
<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

| key             | Type    | Required | Description                                                                                                                                                                                                                                                  |
| --------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autoStart       | boolean | No       | if set to `true` stopwatch will auto start, by default it is set to `false`                                                                                                                                                                                  |
| 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 |

### 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 `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](https://riderx.github.io/vue-timer-hook/)

### Example

```html
<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

| key    | Type   | Required | Description                                           |
| ------ | ------ | -------- | ----------------------------------------------------- |
| format | string | No       | if set to `12-hour` 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 `12-hour` format is used |

### Credit

Inspired by [react-timer-hook](https://github.com/amrlabib/react-timer-hook)