@bradgarropy/use-timer
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

useTimer

version downloads size github actions coverage typescript contributing contributors discord

React hook implementation of a stopwatch. Featured in MURPHY.

next link

📦 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


Brad Garropy

💻 📖 ⚠️ 🚇

Sam Apter

🐛 📖

Package Sidebar

Install

npm i @bradgarropy/use-timer

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

17.9 kB

Total Files

9

Last publish

Collaborators

  • bradgarropy