Skip to main content

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 timer
  • endTime - the end time value for the timer
  • interval (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 timer
  • isRunning - a boolean value indicating whether the timer is running
  • start - a function to start the timer
  • pause - a function to pause the timer
  • reset - a function to reset the timer