useTimer()
The useTimer
hook provides a simple way to manage a timer with start, pause, and reset functionalities. It supports both counting up and counting down with a customizable interval.
Import
import { useTimer } from 'react-haiku';
Usage
Loading...
import { useTimer } from 'react-haiku';
export const TimerComponent = () => {
const { time, isRunning, start, pause, reset } = useTimer({
startTime: 0,
endTime: 10,
interval: 1000,
});
return (
<div>
<p>Time: {time}</p>
<button onClick={start} disabled={isRunning}>
Start
</button>
<button onClick={pause} disabled={!isRunning}>
Pause
</button>
<button onClick={reset}>Reset</button>
</div>
);
};
API
This hook accepts the following arguments:
startTime
- the initial time value for the timerendTime
- the end time value for the timerinterval
(number, default:1000
)- the interval in milliseconds to update the timer value
This hook returns an object with the following properties:
time
- the current time value of the timerisRunning
- a boolean value indicating whether the timer is runningstart
- a function to start the timerpause
- a function to pause the timerreset
- a function to reset the timer