Simultaneous Particles component in multiple parent components?

[rikkerorbak]

Hello!

First of all, thanks for a really awesome library! I really hope what I wish to do is possible!

I am developing an app displaying employees in React (class components) + Typescript and I am extremely new to it (so this may all be a little ambitious, but I'll give it a shot).

Each employee is its own component, 16 shown on one page at a time, and I would like to mark anniversaries or birthday with tsParticles (e.g. confetti) within such a component. Some of these events may fall on the same day, so I need to be able to render multiple Particle components, so I am right now attempting to render the Particles component on all these Employee components simultaneously (just to test), but it only renders on the first, and all have the same id.

Is it possible to render multiple Particles components simultanously? I have searched high and low, and I see something similar is possible with vanilla JS (with multiple tsParticles.load()-functions like here, but cannot figure out how it would be done in React.

I hope my question makes sense. I've attached a mock of the layout.

Thanks in advance!

[matteobruni]

The id must be unique, this is a JavaScript requirement. There's an unsolved issue that I'm reworking about the init property/function. Be sure to call it once, all the instances share the same loaded Engine. There are no issues in running multiple times, but keep particles number low, many instances with many particles can be too much on the client machine.

[rikkerorbak]

Thanks so much for such a quick reply!
I'll tinker a bit with making unique ids. I'll also take into consideration the number of particles

[rikkerorbak]

I got it working! Thank you so much!