I have been trying to implement Particles.js on my portfolio website but have been rather unsuccessful. These are the following lines of code I have run in my library to get it running:
npm install tsparticles
npm install react-particles-js
I have referred to https://www.geeksforgeeks.org/how-to-use-particles-js-in-react-project/ and https://www.npmjs.com/package/react-particles-js and went about including their code as they went about it but nothing seems to appear on my page.
Here's an image of my page right now: How my page looks right now
This is my code for the page:
import React, { useEffect } from 'react';
import Particles from 'react-particles-js';
const Index_body = () =>{
return(
<React.Fragment>
<div className="index_body">
<Particles
params={{
"particles": {
"number": {
"value": 50
},
"size": {
"value": 3
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
}
}
}
}}
/>
</div>
</React.Fragment>
);
}
export default Index_body;
Hope you guys can help me out! Thanks!
in default Particles stroke color is white therefor i think you can't see partials . So try to change and see wrapping component background color or partial stroke color. you can change particle color with below code 👇
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#0030ff"
},
...
}