use-persistent-stopwatch
v1.3.0
Published
Persistent stopwatch Vue composable
Downloads
20
Readme
✨ Features
- Multiple instances referenced by a key.
- Persistence through sessions and tabs using storage.
- Pausable/resumable.
- Fully typed with TypeScript.
- Compatible with Vue 2 and 3 (thanks to vue-demi).
- Super small (<2kB).
🧱 Prerequisites
- Vue 2: you need the Composition API plugin installed (>=1.1.0).
- Vue 3: you don't need anything else than Vue (>=3.2.0).
⚙️ Installing
For Yarn users:
yarn add use-persistent-stopwatch
For Npm users:
npm install use-persistent-stopwatch
🚀 Usage
Basic usage
Simply import the composable and call it in your setup()
function:
<script lang="ts">
import usePersistentStopwatch from 'use-persistent-stopwatch'
export default defineComponent({
setup() {
const { elapsed, pause, resume, reset } = usePersistentStopwatch('cute-watch')
return { elapsed, pause, resume, reset }
}
})
</script>
<template>
<div>
<span :style="{ color: running ? 'green' : 'red' }">elapsed time: {{ elapsed }}</span>
<button @click="resume">resume</button>
<button @click="pause">pause</button>
<button @click="reset">reset</button>
</div>
</template>
Multiple stopwatches
You can create multiple independent stopwatches by using different keys:
<script lang="ts">
import usePersistentStopwatch from 'use-persistent-stopwatch'
export default defineComponent({
setup() {
const { elapsed: elapsedOne, pause: pauseOne, resume: resumeOne } = usePersistentStopwatch('watch-one')
const { elapsed: elapsedTwo, pause: pauseTwo, resume: resumeTwo } = usePersistentStopwatch('watch-two')
return { elapsedOne, elapsedTwo, pauseOne, pauseTwo, resumeOne, resumeTwo }
}
})
</script>
🤝 Contributing
Any contribution to the project is welome.
Run into a problem? Open an issue.
Want to add some feature? PRs are welcome!
👤 About the author
Feel free to contact me:
📝 Licence
Copyright © 2021 Sacha Bouillez. This project is under MIT license.