JSPM

countdown-hook

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q51629F
  • License ISC

Package Exports

  • countdown-hook
  • countdown-hook/dist/useCountdown.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (countdown-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!