Particle.js is a great JavaScript library for creating 2d as well as 3d looking particles on your website.
But using Particle.js is not an easy task so there is a new version of Particles.js created for Component-based frameworks like React, Vue, and Angular which is rewritten in TypeScript and is called TsParticles and has a special package for easy integration in React called as react-tsparticles.
react-tsparticles is an awesome package for creating particles in React.js.
#Prerequisites
Create a new React app with npx create-react-app my-app or you can continue with your existing app if you have already created one.
Now we’ll have an App.js file in my case here it is after some editing.
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello Coders!</h1>
</div>
);
}#How to use react-tsparticles in React.js
First of all, you have to install react-tsparticles as well as tsparticles as react-tsparticles depends upon it.
npm i react-tsparticles
npm i tsparticlesif any legacy error shows up use –force
npm i react-tsparticles --force
npm i tsparticles --forceNow import Particles from react-tsparticles and { loadFull } from tsparticles.
import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
export default function App() {
return (
<div className="App">
<h1>Hello Coders!</h1>
</div>
);
}Now we can use the Particles component by passing some props such as id, init which is going to be an initialization function, options that are going to be the configurations for particles that we want to display, or URLs to use “options” from a remote URL with a JSON URL.
You can get lots of options and presets from Particle.js official demo website.
import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
export default function App() {
return (
<div className="App">
<h1>Hello Coders!</h1>
<Particles id="particles-here" init={anInitFunction} options={
// an config object
} />
</div>
);
}Below is the working code for the above method
import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
export default function App() {
const particlesInit = async (main) => {
console.log(main);
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(main);
};
return (
<div className="App">
<h1>Hello Coders!</h1>
<Particles
id="tsparticles"
init={particlesInit}
options={{
"fullScreen": {
"enable": true,
"zIndex": 1
},
"particles": {
"number": {
"value": 10,
"density": {
"enable": false,
"value_area": 800
}
},
"color": {
"value": "#fff"
},
"shape": {
"type": "star",
"options": {
"sides": 5
}
},
"opacity": {
"value": 0.8,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": false,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"rotate": {
"value": 0,
"random": true,
"direction": "clockwise",
"animation": {
"enable": true,
"speed": 5,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 600,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": ["grab"]
},
"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": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"background": {
"color": "#111",
"image": "",
"position": "50% 50%",
"repeat": "no-repeat",
"size": "cover"
}
}}
/>
</div>
);
}and you’ll get this
now you can mess around with options and you can find and create your own configurations for particles for reference visit the official website.
Hope you liked this tutorial, Happy Coding.
