React Countdown Hook

A simple and lightweight React hook for creating countdown timers.

Features

• Easy to use
• Start, stop, and reset functionality
• Time formatted as mm:ss
• Written in TypeScript

Installation

npm install react-ts-countdown-hook

or

yarn add react-ts-countdown-hook

Usage

Here's a basic example of how to use the useCountdown hook in your React component:

import React from "react";
import { useCountdown } from "react-ts-countdown-hook";

const App = () => {
  const { seconds, formatted, isActive, start, stop, reset } = useCountdown(60);

  return (
    <div>
      <h1>Countdown: {formatted}</h1>
      <p>Total seconds remaining: {seconds}</p>
      <p>Timer is {isActive ? "running" : "stopped"}</p>
      <button onClick={start} disabled={isActive}>
        Start
      </button>
      <button onClick={stop} disabled={!isActive}>
        Stop
      </button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default App;

API

useCountdown(initialSeconds: number)

The hook takes one optional argument:

• initialSeconds (optional): The initial time for the countdown in seconds. Defaults to 120.

Return Values

The hook returns an object with the following properties:

• seconds: The current time of the countdown in seconds.
• formatted: The current time formatted as a mm:ss string.
• isActive: A boolean that is true when the countdown is running.
• start(): A function to start the countdown.
• stop(): A function to stop the countdown.
• reset(): A function to reset the countdown to its initial value.

License

This project is licensed under the MIT License. If you find this project useful, please consider giving it a star on GitHub.