useStopwatch
A hook that provides stopwatch functionality with pause, play, and reset controls. Perfect for implementing time tracking, activity duration, and elapsed time features.
Parameters
This hook doesn’t take any parameters.
Returns
current
:string
- Current time in “DD:HH:MM:SS” formatisPaused
:boolean
- Whether the stopwatch is pausedisOver
:boolean
- Whether the stopwatch has been stoppedcurrentDays
:number
- Current elapsed dayscurrentHours
:number
- Current elapsed hourscurrentMinutes
:number
- Current elapsed minutescurrentSeconds
:number
- Current elapsed secondselapsedSeconds
:number
- Total elapsed secondspause
:() => void
- Function to pause the stopwatchplay
:() => void
- Function to start/resume the stopwatchreset
:() => void
- Function to reset to zerotogglePause
:() => void
- Function to toggle pause state
Usage
import { useStopwatch } from '@rhinolabs/react-hooks';
function ActivityTimer() {
const {
current,
isPaused,
togglePause,
reset,
elapsedSeconds
} = useStopwatch();
return (
<div>
<h2>Time Elapsed: {current}</h2>
<button onClick={togglePause}>
{isPaused ? 'Resume' : 'Pause'}
</button>
<button onClick={reset}>
Reset
</button>
<p>Total seconds: {elapsedSeconds}</p>
</div>
);
}
Notes
- Starts from 00:00:00:00
- Updates every second
- Provides formatted and parsed time values
- Includes pause/play/reset controls
- Tracks elapsed time in multiple formats
- Auto-cleanup on unmount
- Handles days overflow
Last updated on