|
import { useState, useRef, useEffect } from "react"; |
|
|
|
export const useTimer = () => { |
|
const [elapsedTime, setElapsedTime] = useState(0); |
|
const timerIntervalRef = useRef(null); |
|
const startTimeRef = useRef(null); |
|
|
|
const startTimer = () => { |
|
startTimeRef.current = Date.now(); |
|
timerIntervalRef.current = setInterval(() => { |
|
const timeElapsed = Math.floor( |
|
(Date.now() - startTimeRef.current) / 1000 |
|
); |
|
setElapsedTime(timeElapsed); |
|
}, 1000); |
|
}; |
|
|
|
const stopTimer = () => { |
|
if (timerIntervalRef.current) { |
|
clearInterval(timerIntervalRef.current); |
|
} |
|
}; |
|
|
|
const formatElapsedTime = () => { |
|
const hours = Math.floor(elapsedTime / 3600); |
|
const minutes = Math.floor((elapsedTime % 3600) / 60); |
|
const seconds = elapsedTime % 60; |
|
|
|
return [ |
|
hours.toString().padStart(2, "0"), |
|
minutes.toString().padStart(2, "0"), |
|
seconds.toString().padStart(2, "0"), |
|
].join(":"); |
|
}; |
|
|
|
useEffect(() => { |
|
startTimer(); |
|
return () => { |
|
stopTimer(); |
|
}; |
|
}, []); |
|
|
|
return { |
|
elapsedTime, |
|
formatElapsedTime, |
|
stopTimer, |
|
}; |
|
}; |
|
|