@bradgarropy/use-timer NPM

⏱ 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

typescript eslint prettier react jest react-hook timer stopwatch

@infinitebrahmanuniverse/nolb-_bra @everything-registry/sub-chunk-140

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago