vue-timer-hook - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #golang #machine-learning #rust #linux #docker #java #awesome #pytorch #ios #open-source

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

// 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)