⏱ 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
🙋🏼♂️ use my ama or twitter to ask any other questions
✨ contributors
Brad Garropy |
Sam Apter |