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.
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
}
}
}}
/>
The README has a link to a nice configuration page that allows you to export the current config as a JSON file. Very handy!
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
}
}
}}
/>
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 [email protected] --force
have fun :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With