New Powerful Machines

    use-persistent-stopwatch
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Artwork by David Ko

    use-persistent-stopwatch

    A Vue composable bringing storage persisted stopwatches to your apps compatible with Vue 2 & 3.

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

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

    Keywords

    none

    Install

    npm i use-persistent-stopwatch

    DownloadsWeekly Downloads

    10

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • prazdevs