Particle.js not working on ReactJS website

Question

I have been trying to implement Particles.js on my portfolio website but have been rather unsuccessful. These are the following lines of code I have run in my library to get it running:

npm install tsparticles

npm install react-particles-js

I have referred to https://www.geeksforgeeks.org/how-to-use-particles-js-in-react-project/ and https://www.npmjs.com/package/react-particles-js and went about including their code as they went about it but nothing seems to appear on my page.

Here's an image of my page right now: How my page looks right now

This is my code for the page:

import React, { useEffect } from 'react';
import Particles from 'react-particles-js';

const Index_body = () =>{
    return(
        <React.Fragment>
            <div className="index_body">
                <Particles
                    params={{
                        "particles": {
                            "number": {
                                "value": 50
                            },
                            "size": {
                                "value": 3
                            }
                        },
                        "interactivity": {
                            "events": {
                                "onhover": {
                                    "enable": true,
                                    "mode": "repulse"
                                }
                            }
                        }
                    }} 
                />
            </div>
        </React.Fragment>
    );
}

export default Index_body;

Hope you guys can help me out! Thanks!

Answer 1

I followed these steps and it worked for me:

1 - I created a new react app

npx create-react-app my-app

2 - installed npm modules:

npm i react-tsparticles
npm i react-particles-js

3 - Copied this code and pasted it in the App.js file.

import React, { Component } from 'react';
import Particles from 'react-particles-js';

class App extends Component {
  render() {
    return (
      <div style={{ backgroundColor: '#333' }}>
        <Particles
          params={{
            particles: {
              number: {
                value: 50
              },
              size: {
                value: 3
              }
            },
            interactivity: {
              events: {
                onhover: {
                  enable: true,
                  mode: 'repulse'
                }
              }
            }
          }}
        />
      </div>
    );
  }
}

export default App;

I am assuming it is because of the white background color or white stroke/particles color that overshadows.

I used your settings, I think it is definitely the background color that is why you cannot see any particles on the browser.

Here is the Github link: https://github.com/siddharth-sunchu/test-particles-lib

You can clone this and do npm start.

Answer 2

in default Particles stroke color is white therefor i think you can't see partials . So try to change and see wrapping component background color or partial stroke color. you can change particle color with below code 👇

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#0030ff"
    },
    ...
}