search

tsparticles / react

React tsParticles official component
https://particles.js.org
MIT License
407 stars 28 forks source link

After these changes it seems not working with autoPlay: false #99

Closed Squikle closed 6 months ago

Squikle commented 6 months ago

@Kritika30032002

Looks like something important was removed with that bunch of deleted code. When I use the new function version of the Particles component I end up with the destroyed variable as 'true' even before calling play(). Duration isn't set in options and by call stack, it happens some safelyCallDestroy() where it calls destroy() itself

With those concerns, I've decided to try the original class version and it works perfectly fine without changing any of my code I also created 2 branches in case of need to reproduce the problem. Please, see https://github.com/Squikle/MemIt/branches -npm run dev -go to http://localhost:5173/terms/1 -press the green button to finish a stack -see particles don't start with the new function component version and some logs of the destroyed variable show it's 'true'

Sorry I don't have much time for deep investigation or fork but contact me if you need some additional information

Kritika30032002 commented 6 months ago

Can you brief what you expect from me to do?

Squikle commented 6 months ago

Could you please see what the problem is and what important code is missing that is causing the problem? Otherwise, I could do a fork the other day and try to fix the problem. I'm not sure why this problem hasn't come up yet. I've checked a few times, I don't think I'm doing anything wrong.

Squikle commented 6 months ago

it's related to this issue https://github.com/tsparticles/react/issues/49

matteobruni commented 6 months ago

@Kritika30032002

Looks like something important was removed with that bunch of deleted code. When I use the new function version of the Particles component I end up with the destroyed variable as 'true' even before calling play(). Duration isn't set in options and by call stack, it happens some safelyCallDestroy() where it calls destroy() itself

With those concerns, I've decided to try the original class version and it works perfectly fine without changing any of my code I also created 2 branches in case of need to reproduce the problem. Please, see https://github.com/Squikle/MemIt/branches -npm run dev -go to http://localhost:5173/terms/1 -press the green button to finish a stack -see particles don't start with the new function component version and some logs of the destroyed variable show it's 'true'

Sorry I don't have much time for deep investigation or fork but contact me if you need some additional information

I've seen your repo and you changes some private variables. That would create some unexpected behaviors, and the destroy could be one of them.

I've tried to create a similar effect (I've not run your repo, but I think it's very close to what you are achieving) here:

https://codesandbox.io/p/sandbox/hopeful-sound-d3qq8j?file=%2Fsrc%2FApp.js%3A33%2C21

The container.addEmitter in JavaScript is not a problem, in TypeScript you need to import the EmitterContainer and cast the container to that type from @tsparticles/plugin-emitters. The container.addEmitter returns the EmitterInstance class, that you can pause/stop manually. In the sample created the Emitters have a life options, to stop both emitters after a second.

Squikle commented 6 months ago

uh, I'll check this one. Thank you a lot for your time