Improve useCountdown
See original GitHub issueHi again @juliencrn, I just moved back to react. I’m thinking on improving the useCountdown
hook. But there would be breaking changes so I want to firstly have a small discussion with you.
Breaking changes
In the example usage
const [count, { start, stop, reset }] = useCountdown({
seconds: 60,
interval: 500,
isIncrement: false,
})
- (important) Rename
seconds
tocountNumber
orstartingCount
,countStart
, etc. Since it is not the real seconds. - (trivial) Change
start
,stop
,reset
tostartCountdown
,stopCountdown
,resetCountdown
respectively. The default one would be unclear and make the code harder to maintain. - (trivial) Change
interval
tointervalMs
orintervalMilisec
specifying its unit.
Non-breaking changes
- Add a
countLimit
, orlimit
,countdownLimit
,countEnd
, etc. to the setting.
Outcome & alternative
The final outcome of this proposal would look like this:
const [count, { startCountdown, stopCountdown, resetCountdown }] = useCountdown({
countStart: 60,
intervalMs: 1000, // add 1000 by default
countStop: 0, // 0 by default
isIncrement: false,
})
Alternative is to make a new useIntervalTimer
hook to do the same job but with new name.
Thanks for reading. What’s your opinion?
Issue Analytics
- State:
- Created a year ago
- Comments:13 (13 by maintainers)
Top Results From Across the Web
bradgarropy/use-countdown: useCountdown hook - GitHub
In any React component, import useCountdown , then call it like any other hook. The returned countdown value will update every second with...
Read more >useCountdown() react hook - usehooks-ts
NEW VERSION: A simple countdown implementation. Accepts countStop (new), countStart (was seconds ), intervalMs (was interval ) and isIncrement as keys of the ......
Read more >react-better-countdown-hook - npm
Better React Countdown Hook. Super simple and lightweight countdown timer hook with most of the functionality you would need.
Read more >How to Use Countdown Timers to boost Conversions ... - Adoric
A countdown timer helps increase website conversions and revenue. Check here how Adoric countdown time can help your business make more ...
Read more >How to create a countdown timer using React Hooks
We can isolate the countdown calculation in a custom hook called useCountdown . The custom hook accepts the initial date and time and ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi PabloLION. Sorry to see this late. The variable name’s change is great. At first I was thinking of being more concise. So I added some jsdoc and use destructuring alias and make your own exact naming. But in typescript doesn’t look good. Your advice is great and I gladly accept. 😃
I didn’t mean that package… Its JSDoc improved to TSDoc, like JS - TS. You can just regard it as JSDoc. I’ll try to do the two versions and make 2 PRs. Thanks for the guidance. ❤️