โฑ๏ธ use-timer
Simple timer turned into React Hooks. Read about Hooks feature.
Installation
npm i use-timer
With Yarn:
yarn add use-timer
Demo
๐ Try last production version on Netlify!
https://use-timer.netlify.app/
Usage
Basic timer
import React from 'react';
import { useTimer } from 'use-timer';
const App = () => {
const { time, start, pause, reset, status } = useTimer();
return (
<>
<div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={reset}>Reset</button>
</div>
<p>Elapsed time: {time}</p>
{status === 'RUNNING' && <p>Running...</p>}
</>
);
};Decremental timer
const { time, start, pause, reset, status } = useTimer({
initialTime: 100,
timerType: 'DECREMENTAL',
});Timer with end time
const { time, start, pause, reset, status } = useTimer({
endTime: 30,
initialTime: 10,
});Advance time
This works for all types of timer (incremental and decremental).
const { time, start, advanceTime } = useTimer({
initialTime: 20,
});
start();
advanceTime(10);
console.log(time); // 30Callbacks
Some callback functions can be provided.
When time is over
const { time, start, pause, reset, status } = useTimer({
endTime,
onTimeOver: () => {
console.log('Time is over');
},
});When time is updated
const { time, start, pause, reset, status } = useTimer({
endTime,
onTimeUpdate: (time) => {
console.log('Time is updated', time);
},
});Configuration
The configuration and all its parameters are optional.
| Property | Type | Default value | Description |
|---|---|---|---|
| autostart | boolean | false | Pass true to start timer automatically |
| endTime | number | null | The value for which timer stops |
| initialStatus | string | "STOPPED" | The initial status for the timer. Options are: "RUNNING", "PAUSED", and "STOPPED" |
| initialTime | number | 0 | The starting value for the timer |
| interval | number | 1000 | The interval in milliseconds |
| onTimeOver | function | Callback function that is called when time is over | |
| onTimeUpdate | function | Callback function that is called when time is updated | |
| step | number | 1 | The value to add to each increment / decrement |
| timerType | string | "INCREMENTAL" | The choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL") |