onUpdate to return the color that timer is showing.

[Dorian Bucknor]

Is it possible to return the current color in onUpdate?

Use case: To use color of the timer (when it changes) as a glow/highlight around other components that are not children of the timer component.

[Vasil Dimitrov]

Hey @dorianbucknor, the onUpdate will fire once every second so passing the color there may not work as expected. You can get the color from the children prop, like:

<CountdownCircleTimer
    isPlaying
    duration={7}
    colors={['#004777', '#F7B801', '#A30000', '#A30000']}
    colorsTime={[7, 5, 2, 0]}
  >
    {({ remainingTime, color }) => {
         // take the color here
         return remainingTime
   }}
  </CountdownCircleTimer>

Just be carful if you save the color using useState because that will cause one additional rerender on each key frame and it may have big performance implications. I'd recommend to use the color from the children prop if that is possible. For example, if you need to change the color of an element close the timer you can push the children outside the circle with CSS.

[Dorian Bucknor]

I tried saving it to a state, did not end well.
However, I kinda went through the index.module.js file and was able to pass it, as you said once every second. (Had to copy your code into new index.js file. Hope you are ok with that😁. I will not redistribute it! ). Save it to a useState from onUpdate, then I used transition: color 1s linear on the other components on the receiving end to smooth color transition.

For onUpdate:
onUpdate={({ remainingTime, color, }) => { dispatch({ type: "UPDATE_TIMER", value: { remainingTime, color, }, }); }}

For other component:
style={{ border: teamData?.isTeamTurn ? `${timer?.color} 7px solid` : "black 2px solid", transition: "all linear 1s", }}
Works perfectly.

One thing not related to this. I wanted to know how I could add a pause or stop that stops the clock where it is.

[Vasil Dimitrov]

Perfect, I am happy that you found a solution.

You can use isPlaying prop to toggle the timer. Check the list of props here

[Dorian Bucknor]

Ok. Thanks.👍💯

[Vasil Dimitrov]

I opened a feature request for this here #67 (comment)