2.0.1 ā¢ Published 4 years ago
use-timer v2.0.1
ā±ļø 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); // 30
Callbacks
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 |
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") |
2.0.1
4 years ago
2.0.0
4 years ago
1.4.0
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.4.0
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago