How to trigger particles like confetti function?

[Dann1y]

I want the particle to run when a button is clicked or some react state changes.

tsparticles-confetti has a confetti function, so I can play the confetti animation every time I action the function.

I tried to use tsparticles-confetti, but the canvas style did not change. So, I am using react-particles, and the canvas style changed, but the animation can not trigging (only init and loaded).

So, my answer is 'how can I trigger the animation inside of the <Particles /> component ?
using props ?

[matteobruni]

I've created a sample here: https://codesandbox.io/p/sandbox/hardcore-shaw-q5fqz8?file=%2Fsrc%2FApp.tsx%3A23%2C11

It shows how to add particles to the container, I've done it in the particlesLoaded function because the container variable arrives from there, but you can store it in your state or something like that and call it from other functions.

https://github.com/tsparticles/tsparticles/blob/223447de0d8c65ed4c2ac0909905576cbde7e44a/bundles/confetti/src/confetti.ts#L146-L208

This is the code used by the confetti function, it adds an emitter instead of particles, so they are handled automatically by that feature. This solution requires emitters: [] in your config, if you don't already have emitters.

The first solution is more flexible, since you can add particles as you want, the other takes care of duration, count, delays and every existing emitter option.

The addParticle function is made like this, for reference if you want to customize the parameters.

https://github.com/tsparticles/tsparticles/blob/223447de0d8c65ed4c2ac0909905576cbde7e44a/engine/src/Core/Particles.ts#L105-L110