How can I set react-particles-js as the background while using React?

Question

I have everything setup already, I just don't know of a way to make the element created by react-particles-js act as the background.

Here is the code I have so far:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavTabs from "./components/NavTabs";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import ParticlesContainer from "./components/ParticlesContainer";


function App() {
  return (
    <ParticlesContainer>
    <Router>
      <div>
        <NavTabs />
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
    </ParticlesContainer>
  );
}

export default App;

However, none of the content shows; only the canvas element is visible while the rest seems to not render at all.

EDIT: Here is the ParticleContainer code:

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


class ParticlesContainer extends Component {
render() {
    return ( 
        <Particles 
            params={{
                "particles": {
                    "number": {
                        "value": 150,
                        "density": {
                            "enable": true,
                            "value_area": 1803.4120608655228
                        }
                    },
                    "color": {
                        "value": "#ffffff"
                    },
                    "shape": {
                        "type": "circle",
                        "stroke": {
                            "width": 2,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 4
                        },
                        "image": {
                            "src": "img/github.svg",
                            "width": 100,
                            "height": 100
                        }
                    },
                    "opacity": {
                        "value": 0.4008530152163807,
                        "random": false,
                        "anim": {
                            "enable": false,
                            "speed": 1,
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 1.5,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {
                        "enable": true,
                        "distance": 0,
                        "color": "#ffffff",
                        "opacity": 0.3687847739990702,
                        "width": 0.6413648243462091
                    },
                    "move": {
                        "enable": true,
                        "speed": 6,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": {
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        }
                    }
                },
                "interactivity": {
                    "detect_on": "window",
                    "events": {
                        "onhover": {
                            "enable": true,
                            "mode": "repulse"
                        },
                        "onclick": {
                            "enable": false,
                            "mode": "bubble"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 400,
                            "line_linked": {
                                "opacity": 1
                            }
                        },
                        "bubble": {
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        },
                        "repulse": {
                            "distance": 100,
                            "duration": 0.4
                        },
                        "push": {
                            "particles_nb": 4
                        },
                        "remove": {
                            "particles_nb": 2
                        }
                    }
                },
                "retina_detect": true
            }} />
    )
}
}

export default ParticlesContainer;

Can I see your ParticlesContainer component? And it would be awesome if you could provide a minimal reproduction — Brian Le, Dec 04 '18 at 00:59
Just added the ParticleContainer code. As far as a reproduction, I am hoping to create something similar to this: https://gyazo.com/bcccba33b4df2eb77f6d3c6226f03263 — Revircs, Dec 04 '18 at 01:04

Brian Le · Accepted Answer · 2018-12-04T01:20:11.233

23

Wrapping your whole <Router /> inside <ParticlesContainer /> is completely unreasonable because your container does not render any children. Hence the invisible content.

I moved <ParticlesContainer /> inside <Router />. After that it's just a CSS problem. Here's a recommended working example: https://codesandbox.io/s/4k5z9xx0w. (You can tweak the stylings to your liking)

What you can do as an alternative is to explicitly render children, but this is unnecessary.

export default ({ children }) => (
  <>
    <Particles />
    {children}
  </>
);

edited Dec 04 '18 at 01:20

answered Dec 04 '18 at 01:15

Brian Le

2,646
18
28

1

@Revircs np, glad to help – Brian Le Dec 04 '18 at 01:53
2

@Revircs if you don’t mind an upvote would be great! Cheers – Brian Le Dec 04 '18 at 01:54
1

I have less than 15 rep so it doesn't display, but I did. – Revircs Dec 04 '18 at 03:22

score 5 · Answer 2 · answered Jun 16 '19 at 07:38

You can assign a class name to the element and use it to define an absolute position, maybe you want to make it important, and then choose the height and the width of the canvas like in the next example

import Particles from 'react-particles-js'
class App extends Component{ 
    render(){
        return (
            <Particles 
                canvasClassName="example"
                height="120px"
                width="300px"
                params={{
                    polygon: {
                        enable: true,
                        type: 'inside',
                        move: {
                            radius: 10
                        },
                        url: 'path/to/svg.svg'
                    }
                }} />
        );
    };

}

In your CSS

.example{
position:absolute !important;
}

score 4 · Answer 3 · answered Oct 20 '19 at 08:26

4

Hope this will help you

import Particles from 'react-particles-js';
  class App extends Component {
  render() {
    return (
      <div className="App">

         <Particles className="particles"
         params={particlesOptions}/>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        >
        <Header Data={Data}/>
      </div>
      </div>
    );
  }
}

export default App;

answered Oct 20 '19 at 08:26

Pratik Dhore

41
4

please explain how this answer the question – Pierre.Vriens Oct 20 '19 at 08:51
Putting the data which we want to overlap on the particles into a div whose style attributes are absolute will solve the issue! – Pratik Dhore Oct 20 '19 at 11:12
This Worked Perfect!!, than k you! – 0xD1x0n Nov 27 '21 at 20:14

lwdthe1 · Answer 4 · 2020-03-07T01:06:22.353

Miguel's answer is good, but it caused an increased memory usage for me; it was basically impossible for me to scroll the page with the canvas being absolute when using particles on elements in a list.

What worked well for me was putting the particles element inside of a absolutely positioned :

<div style={{position: 'relative'}}>
  <div style={{position: 'absolute'}}>
    <Particles
      params={{
        particles: {
          number: {
            value: 50,
          },
          size: {
            value: 3,
          },
        },
      }}
    />
  </div>
  <div>
    My actual content
  </div>
<div>

You may have to play around with z-index styling to get the particles to the background.

score 1 · Answer 5 · answered May 13 '21 at 06:20

Maybe you want to try something like this. Remember to add the className so you can apply the styles in your CSS

import Particles from 'react-particles-js';
  function App() {
    return (
      <div className="App">

         <OtherComponents/>
         <OtherComponents/>
         <Particles className="particles"
         params={particlesOptions}/>
        
     
      </div>
    );
  }
}

export default App;

This goes in your CSS file

.particles{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

score 0 · Answer 6 · edited May 09 '19 at 10:50

Hope This is the example which will help you:

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

class DummyComponent extends Component {

    render() {

        return (

            <Particles
                params={{
                    "particles": {
                        "line_linked": {
                                    "color":"#FFFFFF"
                                    },
                        "number": {
                            "value": 150
                        },
                        "size": {
                            "value": 5
                        }
                    },
                    "interactivity": {
                        "events": {
                            "onhover": {
                                "enable": true,
                                "mode": "repulse"
                            }
                        }
                    }
                }}
                style={{
                        width: '100%',
                        background: `#000000` 
                 }}
                />
                )}
            }
export default DummyComponent;

How can I set react-particles-js as the background while using React?

6 Answers6