index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyTimer from './MyTimer';
import reportWebVitals from './reportWebVitals';
import { unstable_batchedUpdates } from 'react-dom' // or 'react-native'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//<React.StrictMode>
<MyTimer />
//</React.StrictMode>
);
// If you want to start measuring performance in your MyTimer, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
MyTimer.js
import React from 'react';
import { useTimer } from 'react-timer-hook';
function MyTimer({ expiryTimestamp }) {
const {
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
resume,
restart,
} = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
const changeStart = ()=>{
if(isRunning === false){
resume();
}else{}
}
const changeReset = ()=>{
if(isRunning === false){
}
}
return (
<div style={{textAlign: 'center'}}>
<h1>react-timer-hook </h1>
<p>Timer Demo</p>
<div style={{fontSize: '100px'}}>
<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
</div>
<p>{isRunning ? 'Running' : 'Not running'}</p>
<button onClick={changeStart}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={() => {
// Restarts to 5 minutes timer
const time = new Date();
time.setSeconds(time.getSeconds() + 300);
if(isRunning === false){
restart(time);
pause();
}else{}
}}>Reset</button>
</div>
);
}
export default MyTimer;
