How do I configure react-tsparticles to remove only clicked objects under mouse

69 Views Asked by At

I want to make the same effect on twitter on birthday it show up balloons on your profile and you can pop any balloon when you click on a balloon.

I tried a lot with react-tsparticles plugin options but I cannot manage to remove objects under mouse when clicked

Here is my plugin's configuration :

  <Particles
            id="tsparticles"
            loaded={particlesLoaded}
            init={particlesInit}
            options={{
              fpsLimit: 120,
              interactivity: {
                events: {
                  onClick: {
                    enable: true,
                    mode: 'remove',
                  },
                  onHover: {
                    enable: true,
                    mode: 'remove',
                  },
                  resize: true,
                },
                modes: {
                  bubble: {
                    distance: 2,
                    size: 15,
                    duration: 1,
                    opacity: 1,
                    speed: 10,
                  },
                  remove: {
                    particles_nb: 1,
                    distance: 1,
                  },
                  push: {
                    quantity: 4,
                  },
                  repulse: {
                    distance: 200,
                    duration: 0.4,
                  },
                },
              },
              particles: {
                number: {
                  density: {
                    enable: false,
                    area: 800,
                  },
                  value: 15,
                },
                collisions: {
                  enable: false,
                },
                move: {
                  enable: true,
                  speed: 5,
                  direction: 'top',
                  random: true,
                  out_mode: 'out',
                },
                shape: {
                  type: 'images',
                  image: [
                    { src: '/app-images/balloonG.png', height: 40, width: 20 },
                    { src: '/app-images/balloonW.png', height: 40, width: 20 },
                  ],
                },
              },
            }}
          />

I tried to set distance to 1 in remove mode but not work, also tried to set detectOn to canvas but no result

0

There are 0 best solutions below