Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onUpdate to return the color that timer is showing. #195

Closed
dorianbucknor opened this issue Feb 23, 2022 · 5 comments
Closed

onUpdate to return the color that timer is showing. #195

dorianbucknor opened this issue Feb 23, 2022 · 5 comments
Labels
Feature Request Request for a new feature

Comments

@dorianbucknor
Copy link

dorianbucknor commented Feb 23, 2022

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.

@vydimitrov
Copy link
Owner

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.

@dorianbucknor
Copy link
Author

dorianbucknor commented Feb 25, 2022

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.

@vydimitrov
Copy link
Owner

Perfect, I am happy that you found a solution.

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

@vydimitrov vydimitrov added the Feature Request Request for a new feature label Feb 25, 2022
@dorianbucknor
Copy link
Author

Ok. Thanks.👍💯

@vydimitrov
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Request Request for a new feature
Projects
None yet
Development

No branches or pull requests

2 participants