Particles don't show up on my web page using tsparticles

Question

I'm trying to use tsparticles, and I followed the following steps: I first installed the package using npm install react-tsparticles. Then I created a component including two files, the particles component:

import React from 'react';
import Particles from 'react-tsparticles';
import ParticlesOptions from './ParticlesOptions';

const ParticlesBackground = () => {
    return (
        
            
            
        
    )
}

export default ParticlesBackground;

And the particles options:

const ParticlesOptions = {
  fps_limit: 60,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        enable: true,
        mode: "push"
      },
      onHover: {
        enable: true,
        mode: "repulse"
      },
      resize: true
    },
    modes: {
      push: {
        particles_nb: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: "#ffffff"
    },
    links: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.4,
      width: 1
    },
    move: {
      bounce: false,
      direction: "none",
      enable: true,
      outMode: "out",
      random: false,
      speed: 2,
      straight: false
    },
    number: {
      density: {
        enable: true,
        area: 800
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: "circle"
    },
    size: {
      random: true,
      value: 5
    }
  },
  detectRetina: true
}

export default ParticlesOptions

I imported the component into my App.js properly as I see no errors, but I still see no particles on my website. Again as I mentioned, no errors are displayed! Here's my App.js:

import React, {Component} from 'react';
import ParticlesBackground from './components/particles/ParticlesBackground';
import Clarifai from 'clarifai';
import Navigation from './components/navigation/Navigation';
import Logo from './components/logo/Logo';
import ImageLinkForm from './components/imageLinkForm/ImageLinkForm';
import Rank from './components/rank//Rank';
import './App.css';

class App extends Component {
   render() {
    return (
    
      
      
      
      
      
    
    );
  }
}

export default App;

The whole App is displayed properly, and my background isn't white as I found people who have the same problem and turns out that because of the background color they just couldn't see the particles. I fixed my vulnerabilities and reinstalled my packages properly, but it's still not working! I also tried to use react-particles-js package instead, but it gives me 'module not found' errors. Any other suggestions? Hope u could help!

user_1616164 · Answer

I think you are using version 2.0.6 or similar version, that has some additional steps.

You can find everything in the official documentation: https://github.com/matteobruni/tsparticles/tree/main/components/react#how-to-use

This is what you are missing

const particlesInit = async (main) => {
    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(tsParticles);
};

And you have to use it in the init attribute like this:

Particles don't show up on my web page using tsparticles

1 Answers