search

uken / react-countdown-timer

A timer component for React that counts down to zero for a specified number of milliseconds.
Apache License 2.0
60 stars 30 forks source link

Pause timer #2

Open dsernst opened 9 years ago

dsernst commented 9 years ago

It would be mighty handy to be able to pause the timer. :smile:

rvierich commented 9 years ago

@dsernst Agreed! (Sorry for the late response)

One approach is to use refs to achieve this, but as of React 0.14 Beta 1, refs will return an element's DOM node instead of the element itself.

Another approach is to check for prop changes in componentDidUpdate and call an appropriate method in response to the change (as described here).

In this case, a paused prop could handle this. When it changes to true, we'd call this.pause(). When changed to false, we'd call this.resume().

What do you think about this approach? Do you still need this functionality?

dsernst commented 9 years ago

Yes, that approach sounds good!

I implemented this feature myself by keeping track of the remaining time in a parent component, then when paused is pressed switching in a dummy component to statically show the paused time, then when the resume button is pressed switching the timer back in with initial time set to remaining time from the parent component. It works... but feels mighty clunky. :confused: