React Stopwatch Hook
Purpose
This package allows everyone to use stopwatch hook to count some spent time.
Demo
API
useStopwatch
Default export from the package.
Accepts the following list of arguments:
- interval:number (default is 10)
Interval timing and basis for increment operation - onStop:Function<{ts: number, ms: number}>
Callback that is called when stop has been called - onStart:Function<{ts: number, ms: number}>
Callback that is called when start has been called - onPause:Function<{ts: number, ms: number}>
Callback that is called when pause has been called - onRestart:Function<{ts: number, ms: number}>
Callback that is called when restart has been called
Each callback function returns timestamp and amount of milliseconds registered on the moment when they were called.
milliseconds
Amount of milliseconds passed since stopwatch start.
status
Indicator on current stopwatch status.
Can be one of the following:
- running
Stopwatch is running - paused
Stopwatch was paused - stopped
Stopwatch is not running
start
Starts stopwatch.
Calls onStart.
pause
Pauses stopwatch, without resetting amount of milliseconds.
Calls onPause.
stop
Stops stopwatch, resets passed milliseconds.
Calls onStop.
restart
Resets passed milliseconds, does not stop stopwatch.
Calls onRestart.
Example
import useStopwatchHook from 'use-stopwatch-hook';
function App() {
const [milliseconds, status, start, pause, stop, restart] = useStopwatch({
interval: 100,
});
return (
<div className="App">
<h1>Use Stopwatch Hook</h1>
<div className="demo-row">
<b>{milliseconds}</b> milliseconds passed
</div>
<div className="demo-row">
current status is <b>{status}</b>
</div>
<div className="demo-row">
<button className="btn" onClick={start}>
Start
</button>
<button className="btn" onClick={pause}>
Pause
</button>
<button className="btn" onClick={restart}>
Restart
</button>
<button className="btn" onClick={stop}>
Stop
</button>
</div>
</div>
);
}
TODO
- Start
- Pause
- Restart
- Stop
- Laps
Contribution
If you have an idea (or many of them) on how to improve and accelerate performance of the hook, then you should fork the repository, make changes and, finally, create a pull-request with a description of what you've done.