Unable to pass the duration as a parent prop about react-countdown-circle-timer HOT 6 CLOSED

Your problem is that props.durationInSeconds is a string, it should number

      <TimerField
        // TODO: how to have this working?
        durationInSeconds="4" <----- this should be number, like  durationInSeconds={4}
      />

I am not sure why you don't see warnings from prop-types but duration should be a number. Also colors props is not correctly set, you are missing the transition duration next to each color:

 <CountdownCircleTimer
      isPlaying
      duration={props.durationInSeconds}
      colors={[["#00FF00"], ["#FF0000"]]} <----- this is wrong value for colors
      onComplete={() => [true, 1000]}
    >

Below is the correct way to set the colors, you can adjust the numbers
colors={[["#00FF00", 0.5], ["#FF0000", 0.5]]}

Please review the list of props, their types and how you can use them.

from react-countdown-circle-timer.

I am closing this one. Let me know if something is not clear.

from react-countdown-circle-timer.

About the colors, it was just a demo, I have that part a bit more complicated to force some nuances (and it is working), but thank you for the additional correction detail!

from react-countdown-circle-timer.

Hey, it really doesn't matter how to you pass the duration to the component, as long as it is a number it is going to work. However, I suspect that the colors you are feeding the component is not correct.

Can you share a bit more of your code or even better create a Codesandbox reproducing the issue and I will take a look on it?

from react-countdown-circle-timer.

Sure, here is it:
https://codesandbox.io/s/frosty-https-p0c7y

As you can see, it starts with a countdown timer starting at 4, as defined here:

When it reaches zero, because onComplete is set to true, it tries to start a second cycle and raises exception:

If you remove the props. here, making the duration now being feed by the durationInSeconds local constant:

You will now see the countdown timer starting at 20, doing a full circle then starting again, endlessly.

For any reason, passing the duration as a prop causes this problem. Not sure why. I really need this construction, as I have the Timer under some other covering components and the duration must be provided by prop.

from react-countdown-circle-timer.

OMG, that was it. The '20' instead of {20}. I really don't understand how could I miss that after looking hundreds of times to the code :( Thank you very much!

from react-countdown-circle-timer.