react-timer-hook
React timer hook is a custom react hook, built to handle timer, stopwatch, and time logic/state in your react component.
useTimer: Timers (countdown timer)useStopwatch: Stopwatch (count up timer)useTime: Time (return current time)
Setup
yarn add react-timer-hook OR npm install --save react-timer-hook
useTimer - Demo
Example
console.warn('onExpire called'), interval: 20 });
return (
);
}
export default function App() {
const time = new Date();
time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
return (
import { useTimer } from 'react-timer-hook';
function MyTimer({ expiryTimestamp }) {
const {
totalSeconds,
milliseconds,
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
resume,
restart,
} = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called'), interval: 20 });
return (
<div style={{textAlign: 'center'}}>
<h1>react-timer-hook h1>
<p>Timer Demop>
<div style={{fontSize: '100px'}}>
<span>{days}span>:<span>{hours}span>:<span>{minutes}span>:<span>{seconds}span>:<span>{milliseconds}span>
div>
<p>{isRunning ? 'Running' : 'Not running'}p>
<button onClick={start}>Startbutton>
<button onClick={pause}>Pausebutton>
<button onClick={resume}>Resumebutton>
<button onClick={() => {
// Restarts to 5 minutes timer
const time = new Date();
time.setSeconds(time.getSeconds() + 300);
restart(time)
}}>Restartbutton>
div>
);
}
export default function App() {
const time = new Date();
time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
return (
<div>
<MyTimer expiryTimestamp={time} />
div>
);
}
react-timer-hook
Timer Demo
{days}:{hours}:{minutes}:{seconds}:{milliseconds}
{isRunning ? 'Running' : 'Not running'}
import { useTimer } from 'react-timer-hook';
function MyTimer({ expiryTimestamp }) {
const {
totalSeconds,
milliseconds,
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
resume,
restart,
} = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called'), interval: 20 });
return (
<div style={{textAlign: 'center'}}>
<h1>react-timer-hook h1>
<p>Timer Demop>
<div style={{fontSize: '100px'}}>
<span>{days}span>:<span>{hours}span>:<span>{minutes}span>:<span>{seconds}span>:<span>{milliseconds}span>
div>
<p>{isRunning ? 'Running' : 'Not running'}p>
<button onClick={start}>Startbutton>
<button onClick={pause}>Pausebutton>
<button onClick={resume}>Resumebutton>
<button onClick={() => {
// Restarts to 5 minutes timer
const time = new Date();
time.setSeconds(time.getSeconds() + 300);
restart(time)
}}>Restartbutton>
div>
);
}
export default function App() {
const time = new Date();
time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
return (
<div>
<MyTimer expiryTimestamp={time} />
div>
);
}
Settings
| key | Type | Required | Description |
|---|---|---|---|
| expiryTimestamp | Date object | YES | this will define for how long the timer will be running |
| autoStart | boolean | No | flag to decide if timer should start automatically, by default it is set to true |
| interval | number | No | value to change the interval of the timer, by default it is set to 1000ms. Note: this value will not affect the timer, it will just define the frequency used to calculate the current timer values. For example, if you have a use case where milliseconds are used, you need to use a smaller value for the interval, for example, 20ms or 100ms based on your needs. |
| onExpire | Function | No | callback function to be executed once countdown timer is expired |
Values
| key | Type | Description |
|---|---|---|
| milliseconds | number | milliseconds value, to get accurate ms values you need to set interval to a smaller value example: 20ms |
| seconds | number | seconds value |
| minutes | number | minutes value |
| hours | number | hours value |
| days | number | days value |
| totalSeconds | number | total number of seconds left in timer NOT converted to minutes, hours or days |
| totalMilliseconds | number | total number of milliseconds left in timer NOT converted to minutes, hours or days |
| isRunning | boolean | flag to indicate if timer is running or not |
| pause | function | function to be called to pause timer |
| start | function | function if called after pause the timer will continue based on original expiryTimestamp |
| resume | function | function if called after pause the timer will continue countdown from last paused state |
| restart | function | function to restart timer with new expiryTimestamp, accept 2 arguments first is the new expiryTimestamp of type Date object and second is autoStart of type boolean to decide if it should automatically start after restart or not, default is true |
useStopwatch - Demo
Example
react-timer-hook
Stopwatch Demo
{days}:{hours}:{minutes}:{seconds}:{milliseconds}
{isRunning ? 'Running' : 'Not running'}
import { useStopwatch } from 'react-timer-hook';
function MyStopwatch() {
const {
totalSeconds,
milliseconds,
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
reset,
} = useStopwatch({ autoStart: true, interval: 20 });
return (
<div style={{textAlign: 'center'}}>
<h1>react-timer-hookh1>
<p>Stopwatch Demop>
<div style={{fontSize: '100px'}}>
<span>{days}span>:<span>{hours}span>:<span>{minutes}span>:<span>{seconds}span>:<span>{milliseconds}span>
div>
<p>{isRunning ? 'Running' : 'Not running'}p>
<button onClick={start}>Startbutton>
<button onClick={pause}>Pausebutton>
<button onClick={reset}>Resetbutton>
div>
);
}
export default function App() {
return (
<div>
<MyStopwatch />
div>
);
}