countdown-hook
v1.0.2
Published
**`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!
Downloads
178
Maintainers
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!