Tsparticles: Refactor React-tsparticles to take children instead of working with classNames and Wrappers

[ivanjeremic]

Refactor React-tsparticles so that all we need to do is wrap it around our app or component where we need the particles, so basically let it have children, this way all the unnecessary stuff like biding to canvas/wrapper/class is automatically handled for us.

Also, I think it is time to move to hooks, I see that the component is unnecessary complicated because it is made with Class components.

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.92. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

Refactor React-tsparticles so that all we need to do is wrap it around our app or component where we need the particles, so basically let it have children, this way all the unnecessary stuff like biding to canvas/wrapper/class is automatically handled for us.

Can you tell me more about this? I don't understand what is all the work needed for binding, wrappers, etc. You just place the <Particles /> tag where you need it, place a CSS with positioning and width (or the backgroundMode if it's simpler) and you're done.

About hooks I discovered them now, I'll have a look at them in these days to see how they work and what is needed to change the code.

[ivanjeremic]

Refactor React-tsparticles so that all we need to do is wrap it around our app or component where we need the particles, so basically let it have children, this way all the unnecessary stuff like biding to canvas/wrapper/class is automatically handled for us.

Can you tell me more about this? I don't understand what is all the work needed for binding, wrappers, etc. You just place the <Particles /> tag where you need it, place a CSS with positioning and width (or the backgroundMode if it's simpler) and you're done.

About hooks I discovered them now, I'll have a look at them in these days to see how they work and what is needed to change the code.

Thanks for taking a look at hooks, it is definitely the way to go. About my issue with React-tsparticles you said to place a CSS with positioning, do you mean by this I need to create a div by myself make positioning so the particles are perfect behind my Website and not above? If yes then this is the reason I suggested to make it easier why not just do this.
` <Particles> <MyAppWithParticlesInTheBackground </Particles>

[matteobruni]

No extra <div> tag is needed.

You can see this sample: https://codesandbox.io/s/react-tsparticles-dw43f?file=/src/App.js

It's not using extra divs and they are placed as a background. Just use the id property on the <Particles /> tag and use it in CSS to change its positioning.

This configuration can be achieved with the new and simpler backgroundMode that you find in my previous comment. If you enable, the Particles will be placed automatically in the background with the zIndex value specified.

I don't think using children will be a good choice since all the <Particles /> children will be <canvas> sibling and CSS will be still needed

[ivanjeremic]

@matteobruni Thanks for backgroundMode first time I come across this and the example, it seems this fixes all the problems I had, thanks for this.

[github-actions[bot]]

Stale issue message