Putting one component behind all others, react

1

Hello everyone, I am using react-particles npm and I would like to put that as a background behind all of my components. The problem is when I do this the particles are on top of all of my components and nothing is clickable. (Except the nav-bar, for some reason)
my app.js looks like this

<div className="App">
       <Background className="goesbehind" />
        <Header data={this.state.resumeData.main}/>
        <Resume data={this.state.resumeData.resume}/>
        <Portfolio data={this.state.resumeData.portfolio}/>
        
        
        
        
       <About data={this.state.resumeData.main}/> 
       
        <Footer data={this.state.resumeData.main}/>
      </div>

and my css rule is

.goesbehind {

   z-index: -1 !important;

}

Visually it’s fine, but not being able to click anything on the page is a big issue.
My project is on my local machine so I put it on codesandbox: https://codesandbox.io/s/reverent-kalam-dzoiz
The app isn’t made for it so you can’t see it displayed, but you can view my full code there.
Thanks in advance for all your help.

2

I got error ReactGA is not defined.

1 Like
3

It’s not working on codesandbox but it’s fine on my localhost.
I just put that there so people could view the full code

4

First of all your App.css is empty and second in background.js you are using another classname

<Particles className="spacebackground"

So either you should make the components className a prop or use .spacebackground.

Just another thing, it is no good idea to mix React and jQuery, you should replace your ajax call with fetch.

Happy coding!

1 Like
5

Alright I will try that solution, thanks.
For the record I am building this on top of a portfolio template I found on the internet, i didn’t mess with any of the dependencies because I was afraid I’d break everything