npmpackage.info

Gathering detailed insights and metrics for @bradgarropy/use-countdown

@bradgarropy/use-countdown - 2.0.1 | npmpackage.info

@bradgarropy/use-countdown

⏳ useCountdown hook

2.0.1

MIT

TypeScript

25.77 kB

2.9

Installations

npm install @bradgarropy/use-countdown

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=10

Node Version

14.21.3

NPM Version

6.14.18 Pull Requests

Open

1

Total

29

Closed

0

Merged

28

Issues

Open

1

Total

10

Closed

9

Releases

📚 tslib

v2.0.1

Updated on Oct 12, 2023

🏁 auto start

v2.0.0

Updated on Jul 19, 2023

📦 dependencies

v1.5.2

Updated on Nov 17, 2022

🐛 fix types

v1.5.1

Updated on Jun 24, 2022

⏲️ change duration

v1.5.0

Updated on Jun 22, 2022

✨ contributors

v1.4.1

Updated on Nov 23, 2021

View All 23 releases

Languages

TypeScript

JavaScript

HTML

TypeScript (94.95%)

JavaScript (2.84%)

HTML (2.21%)

Developer

bradgarropy

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

92 Stars

39 Commits

12 Forks

2 Watchers

1 Branches

5 Contributors

Updated on Jan 30, 2025

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

2.0.1

Package Id

@bradgarropy/use-countdown@2.0.1

Unpacked Size

25.77 kB

Size

7.22 kB

File Count

NPM Version

6.14.18

Node Version

14.21.3

Published on

Oct 12, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

⏳ useCountdown hook

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

📦 Installation

This package is hosted on npm.

1npm 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.

1import useCountdown from "@bradgarropy/use-countdown"
2
3const App = () => {
4    const countdown = useCountdown({
5        minutes: 1,
6        seconds: 30,
7        format: "mm:ss",
8        autoStart: true,
9        onCompleted: () => console.log("onCompleted"),
10    })
11
12    console.log(countdown)
13
14    // {minutes: 1, seconds: 30, formatted: "01:30", ...}
15    // {minutes: 1, seconds: 29, formatted: "01:29", ...}
16    // {minutes: 1, seconds: 28, formatted: "01:28", ...}
17    // ...
18    // {minutes: 0, seconds: 0, formatted: "00:00", ...}
19    // onCompleted()
20}

📖 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.

1const countdown = useCountdown({
2    minutes: 1,
3    seconds: 30,
4    format: "mm:ss:SS",
5    autoStart: true,
6    onCompleted: () => console.log("onCompleted"),
7})
8
9const countdown = useCountdown({
10    minutes: 5,
11    onCompleted: () => console.log("onCompleted"),
12})
13
14const 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.

1{
2    minutes: 1,
3    seconds: 30,
4    formatted: "01:30",
5    isActive: true,
6    isInactive: false,
7    isRunning: true,
8    isPaused: false,
9    pause: () => void,
10    resume: () => void,
11    reset: (time?: Time) => void,
12}

❔ 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 🐛 💻

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.9

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@bradgarropy/use-countdown

Installations

Developer Guide

Yes

CommonJS

>=10

14.21.3

6.14.18

Pull Requests

1

29

0

28

Issues

1

10

9

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

⏳ useCountdown hook

📦 Installation

🥑 Usage

📖 API Reference

useCountdown({minutes, seconds})

❔ Questions

✨ Contributors

10

10

10

5

1

0

0

0

0

0

0

0

0

2.9

/10

`useCountdown({minutes, seconds})`