1import React, { FC, useState, useEffect } from 'react'; 2import { useInterval } from 'react-use'; 3import { Time, TimeProps } from './Time'; 4 5const INTERVAL = 150; 6 7export interface ElapsedTimeProps extends Omit<TimeProps, 'timeInMs'> { 8 // Use this to reset the timer. Any value is allowed just need to be !== from the previous. 9 // Keep in mind things like [] !== [] or {} !== {}. 10 resetKey?: any; 11} 12 13export const ElapsedTime: FC<ElapsedTimeProps> = ({ resetKey, humanize, className }) => { 14 const [elapsed, setElapsed] = useState(0); // the current value of elapsed 15 16 // hook that will schedule a interval and then update the elapsed value on every tick. 17 useInterval(() => setElapsed(elapsed + INTERVAL), INTERVAL); 18 // this effect will only be run when resetKey changes. This will reset the elapsed to 0. 19 useEffect(() => setElapsed(0), [resetKey]); 20 21 return <Time timeInMs={elapsed} className={className} humanize={humanize} />; 22}; 23