vue-use-timer

English Version | Русская версия

The useTimer hook is a custom Vue composition API function for managing a timer. It provides functionalities to start, stop, pause, and play the timer, along with the ability to register callbacks for each timer event.

Importing

To use the useTimer hook, simply import it into your Vue component.

import { useTimer } from "vue-use-timer"

const timer = reactive(useTimer())

Example usage

export default {
  setup() {
    const { time, onStop, onStart, onPause, onPlay, play, pause, stop, start, isPaused } = useTimer({
      formatter: (ms) => `${Math.floor(ms / 1000)} seconds`
    });

    onStart(() => {
      console.log('Timer started');
    });

    onStop(() => {
      console.log('Timer stopped');
    });

    onPause(() => {
      console.log('Timer paused');
    });

    onPlay(() => {
      console.log('Timer resumed');
    });

    return {
      time,
      play,
      pause,
      stop,
      start,
      isPaused
    }
  }
}

Or in the following format

export default {
  setup() {
    const timer = reactive(useTimer({
      formatter: (ms) => `${Math.floor(ms / 1000)} seconds`
    }))
    
    timer.onStop(() => { '...' })
    timer.start(5000)
  }
}

API

Functions

start(ms: number): Starts the timer with the specified number of milliseconds.
stop(): Stops the timer and resets the time.
pause(): Pauses the timer.
play(): Resumes the timer from the paused state.

Events

onStart(callback: Function): Registers a callback for the start event.
onStop(callback: Function): Registers a callback for the stop event.
onPause(callback: Function): Registers a callback for the pause event.
onPlay(callback: Function): Registers a callback for the play event.

Values

time: The timer's time, in milliseconds, if the formatter does not return another value. Will return 0 if the time has expired.
isPaused: Returns true if the timer is paused.