1.0.2 • Published 8 months ago

countdown-hook v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

useCountdown Hook

useCountdown is a lightweight, customizable React hook for creating countdown timers. Whether you need a countdown for a flash sale, event, quiz, or workout app, useCountdown has you covered!

Features

  • Countdown from a specified number of seconds.
  • Simple and reusable across your React projects.
  • TypeScript-compatible for better type safety.

Installation

To use useCountdown, install it from npm:

npm install countdown-hook

Usage

useCountdown accepts the countdown duration in seconds and returns the remaining minutes and seconds. Here’s how to get started:

Basic Example

In this example, we set a 1-minute (60-second) countdown:

import React from 'react';
import useCountdown from 'countdown-hook';

const Timer = () => {
  const [minutes, seconds] = useCountdown(60); // countdown from 60 seconds

  return (
    <div>
      <h1>Countdown Timer</h1>
      <p>
        {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
      </p>
    </div>
  );
};

export default Timer;

When useCountdown(60) is called, it starts a countdown from 1 minute. The hook returns an array with [minutes, seconds], which you can display in any format you like.

Example with Longer Duration

Here’s how to set a 5-minute countdown:

const [minutes, seconds] = useCountdown(300); // 5 minutes = 300 seconds

How It Works

The hook takes the countdown duration (in seconds) and automatically updates every second. It stops at zero, ensuring no negative time is displayed.

License

useCountdown is open-source software licensed under the MIT License. Feel free to use it, modify it, and share it in your projects!