Tsparticles: Make the particles clickable

[lectair]

Would it be possible to somehow make the particles clickable?
To make them a lot more interactive. Invoke some action when a particle is clicked, such as open a link or execute js/php code.

[issue-label-bot[bot]]

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

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

[matteobruni]

Hi @lectair,

This feature was already requested to me these days and I made a sample in CodePen with a workaround.

https://codepen.io/matteobruni/pen/QWyGMxZ

The click event is reported in console, where it logs the clicked particle or undefined.

For now this is the only solution, I'll work on a better solution for version 1.17.0

[matteobruni]

I've released 1.17.0-alpha.8 with an improved click handler if you want to test it.

You can also checkout a sample here https://codepen.io/matteobruni/pen/QWyGMxZ

Texts with more than 1 char will be clickable in the center because particles are treated like circles everywhere.

[lectair]

Hello again @matteobruni
Sorry for the delay, I've been a little busy these days

Lots of thanks for that incredible improvement. I'll keep an eye on it ;)

[grenzbotin]

Tiny question in addition for React usage:
How is it possible to use the own click handler with setOnClickHandler via using react-tsparticles?

Thanks upfront :)

[matteobruni]

Hi @grenzbotin,

In the 1.18.x version is not possible, the upcoming 2.0.0 will permit this customization. If you want it, you can set your own click event on canvas or the particles div copying the code from here:

https://github.com/matteobruni/tsparticles/blob/4340750b22588bc764845f58b2848377b20ca9ee/core/main/src/Core/Loader.ts#L193