React Timer Hook

A simple and customizable React timer hook for managing countdowns or timers.

Installation

npm install react-timer-hook-ts

Usage

import { useTimer } from 'your-timer-package';
import React, { useEffect } from 'react';

function TimerComponent() {
  const { time, isRunning, startTimer, pauseTimer, customTime } = useTimer({
    initialTime: 60, // Initial time in seconds
    onTimerEnd: () => {
      console.log('Timer ended!');
    },
    format: 'HH:mm:ss', // Optional format for displaying time
  });

  useEffect(() => {
    if (isRunning && customTime.seconds === 30) {
      // Do something when timer reaches 30 seconds
    }
  }, [isRunning, customTime.seconds]);

  return (
    <div>
      <p>{time}</p>
      <button onClick={startTimer}>Start Timer</button>
      <button onClick={pauseTimer}>Pause Timer</button>
    </div>
  );
}

export default TimerComponent;

API

useTimer(options: TUseTimerProps)

A custom React hook for managing timers.

Options

• initialTime: Initial time in seconds.
• onTimerEnd: Callback function to be executed when the timer reaches zero.
• format: Optional format for displaying time (default is 'HH:mm:ss').

Returns

• time: Formatted time string.
• isRunning: Boolean indicating whether the timer is running.
• startTimer: Function to start the timer.
• pauseTimer: Function to pause the timer.
• customTime: Object containing days, hours, minutes, and seconds.