This package allows everyone to use stopwatch hook to count some spent time.
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.
Amount of milliseconds passed since stopwatch start.
Indicator on current stopwatch status.
Can be one of the following:
- running
Stopwatch is running - paused
Stopwatch was paused - stopped
Stopwatch is not running
Starts stopwatch.
Calls onStart.
Pauses stopwatch, without resetting amount of milliseconds.
Calls onPause.
Stops stopwatch, resets passed milliseconds.
Calls onStop.
Resets passed milliseconds, does not stop stopwatch.
Calls onRestart.
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>
);
}
- Start
- Pause
- Restart
- Stop
- Laps
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.