Comments (6)
But anyhow, thanks again @hernanif1 for taking the time to create the demo and report it. Better be this way than having an issue hidden.
from react-countdown-circle-timer.
Hey, I am not able to reproduce it, please refer to the Codesandbox here- https://codesandbox.io/s/gracious-dust-dwptd
Please share a demo where the issue can be reproduced.
from react-countdown-circle-timer.
you need to force the key to change using maybe the same variable that you are setting
https://codesandbox.io/s/strange-neumann-35dsn?file=/src/App.tsx
from react-countdown-circle-timer.
Hey @hernanif1, good catch, thanks for the demo. I was able to reproduce it now. I will investigate and fix it.
from react-countdown-circle-timer.
Wait wait wait ... this is how React works ... I needed a few minutes to think about it before releasing that. So what happens here is that when you change the key
of the component the component is unmounted and new instance of it is mounted. The new instance starts the animation right the way because isPlaying
is true. The previous instance of the component is unmounted thus all functions and callbacks are removed.
I think it works as expected. Does this make sense?
from react-countdown-circle-timer.
It appeared that the issue is triggered when we try to change the isPlaying
state within the onCompelte
handler. I will have a fix for it.
from react-countdown-circle-timer.
Related Issues (20)
- onComplete always fire when reset duration after onComplete 1st bug HOT 1
- Inaccurate progress when used as a progress bar HOT 2
- animatedColor status | Bump CountdownCircleTimer from 2.5.4 to 3.0.9? HOT 1
- Cannot run countdown in a test (vitest) HOT 2
- updateInterval not working for 1 second HOT 7
- Cannot find name remainingTime HOT 2
- On Ios the counter remainingTime becames NaN HOT 7
- Error HOT 2
- Render Error: Cannot convert undefined value to object HOT 2
- Type error: using strings inside "colors" prop HOT 2
- Kill and restart the app timer restart HOT 2
- Can not stop when complete
- Start at prop HOT 3
- Error: Timer causes apk to crash HOT 3
- Slow down Rotation speed HOT 2
- Issue with colors being calculated and displayed HOT 2
- Timer display gets cut in half when used as a Header. HOT 1
- When I add "initialRemainingTime" this prop into CountdownCircleTimer, and refresh the page, it starts from "duration". But instead it hsould start from "initialRemainingTime" HOT 2
- Add key prop to useCountdown hook for refreshing HOT 5
- Error while updating property 'strokeDasharray' of a view managed by: RNSVGPath. java.lang.Double cannot be cast to com.facebook.react.bridge.ReadableArray HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-countdown-circle-timer.