@aakashx2838/use-timer
v1.0.2
Published
A simple React timer hook.
Downloads
279
Maintainers
Readme
Use Debounce
A simple React timer hook.
Installation
npm install @aakashx2838/use-timer
# or
yarn add @aakashx2838/use-timer
Usage
import { useTimer } from "./use-timer";
function App() {
const { time, isRunning, toggle, reset } = useTimer({
reverse: true,
targetTime: -5,
loop: true,
});
return (
<>
<p>
{time.h}: {time.m}: {time.s}
</p>
<button onClick={toggle}>{isRunning ? "Stop" : "Start"}</button>
<button onClick={reset}>Reset</button>
</>
);
}
export default App;
Defaults
let step = 1; // in seconds
let timeInterval = 1; // in seconds
let startTime = 0; // in seconds
let targetTime = 0; // in seconds
let reverse = false; // in seconds
let loop = false; // in seconds
let onComplete = () => {};
let onStart = () => {};
let onPause = () => {};
let onTimeUpdate = (time: number) => {};
Options
| Option | Type | Description | | ------------ | -------- | ---------------------------------------------------------------------------------------------- | | step | number | The amount of time to increment/decrement the timer by. | | timeInterval | number | The interval at which the timer updates. | | startTime | number | The time at which the timer should start. | | targetTime | number | The time at which the timer should stop (Only provide if reverse is true). | | reverse | boolean | If true, the timer will count down. If false, the timer will count up. | | loop | boolean | If true, the timer will restart when it reaches the target time. | | onComplete | function | A callback function that will be called when the timer reaches the target time. | | onStart | function | A callback function that will be called when the timer starts. | | onPause | function | A callback function that will be called when the timer is paused. | | onTimeUpdate | function | A callback function that will be called when the timer updates. The current time is passed in. |
Structure of time
{
h: number;
m: number;
s: number;
}