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;

Answer 1

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}
  </>
);

Answer 2

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;
}

Answer 3

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;

Answer 4

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.