vue-timer-hook - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #golang #rust #linux #nodejs #macos #windows #cli #kubernetes #vue #security #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.

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd vue-timer-hook

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

pnpm add vue-timer-hook

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn add vue-timer-hook

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm install vue-timer-hook

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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)