bradgarropy / use-countdown Goto Github PK

View Code? Open in Web Editor NEW

89.0 2.0 13.0 656 KB

⏳ useCountdown hook

Home Page: https://www.npmjs.com/package/@bradgarropy/use-countdown

License: MIT License

HTML 2.21% TypeScript 94.95% JavaScript 2.84%

typescript react react-hook countdown

use-countdown's Introduction

⏳ useCountdown hook

React hook countdown timer. As seen on my Twitch streams.

📦 Installation

This package is hosted on npm.

npm install @bradgarropy/use-countdown

🥑 Usage

In any React component, import useCountdown, then call it like any other hook. The returned countdown value will update every second with the remaining time.

import useCountdown from "@bradgarropy/use-countdown"

const App = () => {
    const countdown = useCountdown({
        minutes: 1,
        seconds: 30,
        format: "mm:ss",
        autoStart: true,
        onCompleted: () => console.log("onCompleted"),
    })

    console.log(countdown)

    // {minutes: 1, seconds: 30, formatted: "01:30", ...}
    // {minutes: 1, seconds: 29, formatted: "01:29", ...}
    // {minutes: 1, seconds: 28, formatted: "01:28", ...}
    // ...
    // {minutes: 0, seconds: 0, formatted: "00:00", ...}
    // onCompleted()
}

📖 API Reference

`useCountdown({minutes, seconds})`

Name	Required	Default	Example	Description
`minutes`	`false`	`0`	`1`	Countdown minutes.
`seconds`	`false`	`0`	`30`	Countdown seconds.
`format`	`false`	`mm:ss`	`mm:ss:SS`	Format string (reference).
`autoStart`	`false`	`false`	`true`	Whether or not to automatically start the countdown.
`onCompleted`	`false`	`undefined`	`function`	Function to call when countdown completes.

Starts a countdown timer based on the number of minutes and seconds provided. The returned countdown object updates once per second and stops when the timer hits zero.

The format parameter is a date-fns format string.

If provided, the onCompleted function will be called when the countdown completes.

Here are some examples of how to call useCountdown.

const countdown = useCountdown({
    minutes: 1,
    seconds: 30,
    format: "mm:ss:SS",
    autoStart: true,
    onCompleted: () => console.log("onCompleted"),
})

const countdown = useCountdown({
    minutes: 5,
    onCompleted: () => console.log("onCompleted"),
})

const countdown = useCountdown({seconds: 10, format: "mm:ss:SS"})

The return object is updated every second until the countdown timer ends.

Name	Type	Example	Description
`minutes`	`number`	`1`	Remaining minutes.
`seconds`	`number`	`30`	Remaining seconds.
`formatted`	`string`	`01:30`	Formatted remaining time.
`isActive`	`boolean`	`true`	Indicates that the countdown is active, either running or paused.
`isInactive`	`boolean`	`false`	Indicates that the countdown is inactive, and has finished counting down.
`isRunning`	`boolean`	`true`	Indicates that the countdown is running.
`isPaused`	`boolean`	`false`	Indicates that the countdown is paused.
`pause`	`function`	`function`	Pauses the countdown.
`resume`	`function`	`function`	Resumes the countdown.
`reset`	`function`	`function`	Resets the countdown.

Here is an example of the returned object.

{
    minutes: 1,
    seconds: 30,
    formatted: "01:30",
    isActive: true,
    isInactive: false,
    isRunning: true,
    isPaused: false,
    pause: () => void,
    resume: () => void,
    reset: (time?: Time) => void,
}

❔ Questions

🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼‍♂️ use my ama or twitter to ask any other questions

✨ Contributors

_{Brad Garropy} 💻 📖 ⚠️ 🚇	_{Matthew Scholta} 💻 📖	_{James Q Quick} 🤔 📓	_{Steven Hofheins} 📝 ✅	_{Jack Reiker} 🤔 📓	_{Mehdi Makhloufi} 🤔 📓	_{Daniel Badir} 🐛 🤔 📓
_{Florin Cosmin} 💻	_{Nick DiMatteo} 🐛	_{Jimmy Longley} 🤔	_{Nuno Fonseca} 🤔	_{Nathan Arthur} 🐛	_msopacua 🐛 💻

use-countdown's People

Contributors

Stargazers

Watchers

Forkers

adamochayon sleepyarpan hketen carlos-song bboydflo remnantante sigilrysing katoba86 katowi86 go-product muratulugg skyturkish abdullaherek

use-countdown's Issues

Add a new feature: allow changing the duration of the countdown

Hello,

I was just wondering if it would be possible to add an ability to change the countdown duration times after useCountdown() has been called.

For example, if you call reset(), the countdown will restart but always for the duration of time specified on the initial useCountdown() call (e.g., 5 seconds). The ability to change the duration of time on a reset() would help me significantly with a project I'm working on.

Thank you for reading this,
SirIsaacNeutron

calling reset() with a time value is causing an error in Next.js (v12)

Hey there @bradgarropy 🤘 First of all, thanks so much for putting this together, it's been lovely to use!

Unfortunately, I just tested out resetting the timer with a specific time object and it keeps throwing this error: RangeError: Invalid time value

What's confusing is that the error is targeting the hook line, even though I'm making the reset() call in another place entirely, via:

resendCodeCountdown.reset({ seconds: 30, format: "s 'sec'" })

Additionally here are some details on the versions I'm running this on:

@bradgarropy/[email protected]
[email protected]
[email protected]

Any ideas why this might not be working as expected? Thanks so much!

add Steven Creates as a contributor

Implementing a reset countdown feature

I want to have the possibility to reset the countdown when a button is clicked. I think it could be relevant to restart the countdown without re-rendering the component.

Add a feature that will count the days in between the 2 dates

Hi Team,

Would you like to add a feature that will automatically count the days in between 2 dates?

Thanks
Venkata

"Cannot find module: 'tslib'"

I'm trying to use this in my Vite + TypeScript + React project. I'm getting this error:

Error: Cannot find module 'tslib'
Require stack:

/Users/work/ProgrammingProjects/focusqueue/node_modules/.pnpm/@bradgarropy [email protected][email protected]/node_modules/@bradgarropy/use-countdown/dist/index.js
❯ Object. node_modules/.pnpm/@bradgarropy [email protected][email protected]/node_modules/@bradgarropy/use-countdown/dist/index.js:3:15

I found the reference to tslib in the compiled dist:

"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var countdown_1 = tslib_1.__importDefault(require("./countdown"));
exports["default"] = countdown_1["default"];
tslib_1.__exportStar(require("./types"), exports);
//# sourceMappingURL=index.js.map

Looking in package.json in this repo, it appears that tslib is a dev dependency.

Should that be moved to the regular dependencies list, or should the build step be modified somehow to remove the reference to tslib from the compiled distribution?

Countdown overtime

Hi,

Is there anyway to allow the timer keep going even after reaching 0?

So, when the timer hits 0, it starts counting up.

Is there a way to start with the countdown paused?

I have a play/pause button in my app that triggers the countdown, but I'd like the default behavior to be for the countdown to be paused until the user hits play.

Implementing a way to freeze/stop the timer

I was wondering if it's possible to implement a freeze/stop for the timer. My use case is building a chess timer, and I need to be able to freeze the timer for each side when someone makes a move.

bradgarropy / use-countdown Goto Github PK

use-countdown's Introduction

⏳ useCountdown hook

📦 Installation

🥑 Usage

📖 API Reference

useCountdown({minutes, seconds})

❔ Questions

✨ Contributors

use-countdown's People

Contributors

Stargazers

Watchers

Forkers

use-countdown's Issues

Recommend Projects

Recommend Topics

Recommend Org

`useCountdown({minutes, seconds})`