⏱ useTimer

React hook implementation of a stopwatch. Featured in MURPHY.

📦 Installation

This package is hosted on npm.

npm install @bradgarropy/use-timer

🥑 Usage

Import the useTimer hook in any React component, then call it to receive a timer that holds the state and functions which implement a stopwatch.

import useTimer from "@bradgarropy/use-timer"

const App = () => {
    const timer = useTimer()

    timer.start()

    timer.lap()
    timer.lap()
    timer.lap()

    timer.stop()

    console.log(timer.elapsedTime)
    // 3000

    console.log(timer.laps)
    // [
    //   {start: 0, end: 1000, time: 1000},
    //   {start: 1000, end: 2000, time: 1000},
    //   {start: 2000, end: 3000, time: 1000}
    // ]

    timer.reset()
}

📖 API Reference

useTimer()

Instantiates a timer, which updates with the latest values. No arguments are required. The hook returns an object with everything needed to implement a stopwatch.

| Name | Type | Example | Description | | :------------ | :--------: | :--------: | :------------------------------------------------------------- | | isActive | boolean | false | Indicates that the timer is active, either running or paused. | | isInactive | boolean | true | Indicates that the timer is inactive, and hasn't been started. | | isRunning | boolean | false | Indicates if the timer is running. | | isPaused | boolean | false | Indicates if the timer is paused. | | elapsedTime | number | 0 | Total time in milliseconds. | | laps | object | [] | Array of laps. | | start | function | function | Starts the timer. | | stop | function | function | Pauses the timer. | | reset | function | function | Resets the timer. | | lap | function | function | Adds a new lap. |

The elapsedTime is expressed in milliseconds, and has a resolution of 10ms.

Each of the control functions are ignored in certain situations.

• start does nothing if the timer is already running.
• stop does nothing if the timer is already paused.
• reset does nothing if the timer is inactive.
• lap does nothing if the timer is paused.

❔ Questions

🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼‍♂️ use my ama or twitter to ask any other questions

✨ contributors