How to use Particles Js in React with react-tsparticles.
Tauleshwar Thakur
Posted on May 25, 2022
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.
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 tsparticles
if any legacy error shows up use --force
npm i react-tsparticles --force
npm i tsparticles --force
Now 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 Particles component by passing some props such as id, init which is going to be an initialization function, options which is going to be the configurations for particles that we want to display or url to use options from a remote url with a json url.
Link to tsparticles options presets
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 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 below is the GitHub repo of list of different presets that you can use to get different particles.
PS: This is my first post and I am looking for your suggestions and of course I'll improve this post with more information.
Posted on May 25, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related