particles.js not showing up in reactjs project

Question

I recently got to know about Particle.js and wanted to use it on my Reactjs application.

I installed it using the command mentioned just below:-

npm install react-particles-js

And it got installed successfully. I checked it in node-modules folder and found it that it has installed properly.

Now, comes the App.js

import React from 'react';
import Navigation from './components/Navigation'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import * as ROUTES from './constants/routes'
import Landing from './components/Landing'
import Home from './components/Home'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PasswordForget from './components/PasswordForget';
import Particles from 'react-particles-js';
function App() {
  return (
    <div className="App">
      <Router>
        <Particles></Particles>
         <Navigation />
         <Route exact path={ROUTES.HOME} component={Home} />
         <Route path={ROUTES.SIGN_IN} component={SignIn} />
         <Route path={ROUTES.SIGN_UP} component={SignUp} />
         <Route path={ROUTES.LANDING} component={Landing} />
         <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForget} />
      </Router>
    </div>
  );
}

export default App;

Here, is what the output looks like

Also, I want the Particles-js to work like a proper background. So, that it comes in Sign-in, sign-up, and home components too.

Please help me. I tried adding parameters inside and it still didn't work.

Drew Reese · Accepted Answer · 2022-02-02T19:08:12.573

My guess is your page is white, and the particle system is also white by default. I tested this in a codesandbox and sure enough they weren't visible until I changed the background color of the container they were in. You can pass configuration props to the component. Here's a simple demo with the particles and links colored black instead.

<Particles
  params={{
    particles: {
      color: {
        value: "#000000"
      },
      line_linked: {
        color: {
          value: "#000000"
        }
      },
      number: {
        value: 50
      },
      size: {
        value: 3
      }
    }
  }}
/>

Outdated

The README has a link to a nice configuration page that allows you to export the current config as a JSON file. Very handy!

Update

The previous configuration page seems to be unreachable now. Here is a newer documentation page.

Edit To make background of page, add some absolute positioning and set some height and width (above sandbox updated!):

<Particles
  style={{ position: "absolute" }}
  height="95%"
  width="95%"
  params={{
    particles: {
      color: {
        value: "#000000"
      },
      line_linked: {
        color: {
          value: "#000000"
        }
      },
      number: {
        value: 50
      },
      size: {
        value: 3
      }
    }
  }}
/>

Hey! This worked!! Thanks! Also, I want to keep it in the background i.e, whatever I have in Home, Sign-in, Sign-up should come on top of this background... How do I do this?? — Neha Chaudhary, Apr 06 '20 at 10:53
@NehaChaudhary You can apply CSS to absolutely position the canvas, and `Particles` takes `height` & `width` props. — Drew Reese, Apr 06 '20 at 16:10

score 1 · Answer 2 · answered Aug 19 '22 at 17:28

1

I took an online course where we use this packet, and it did not work. In order to work I had to go to the docs, and change the version of packet that I downloaded.

npx install react-particles-js@2.4.0-beta.2 --force

have fun :)

answered Aug 19 '22 at 17:28

Antonio Costa

19
3

That package are deprecated and it's not compatible with React 17 or newer as you can read here: https://github.com/wufe/react-particles-js#warning-deprecation-notice, migrating to `react-tsparticles` (or `react-particles`, is the same) is the best solution since it's actively maintained and updated. You can read more here: https://github.com/matteobruni/tsparticles/tree/main/components/react. Using `--force` is not always the best solution. – Caelan Aug 26 '22 at 15:18

score -1 · Answer 3 · answered Feb 02 '22 at 17:06

-1

@Neha Chaudhary : You can make a .particles class link in css and use z-index:-1

.particles{
z-index: -1;
}

answered Feb 02 '22 at 17:06

Owen Magumise

1

Using the latest `react-particles-js` version (deprecated, but in the original question), or the latest `react-tsparticles` version (the new library), this code is not going to work. – Caelan Feb 02 '22 at 19:02
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Faisal Nazik Feb 03 '22 at 06:01
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30972815) – harry Feb 09 '22 at 16:23

particles.js not showing up in reactjs project

3 Answers3

Outdated

Update

Linked