How to use Particle.js in your React App

Md. Abu Bakar
Oct 31, 2020
React Particle.js

Today, I’m going to show you how to use particle.js in your react app. First of all, you have to go to Particle.js and then apply your desired styles from the right sidebar. and then click on Download current config (json). After that create a new react application and install particle.js using npm install particles.js now create a component named Particle.js and use import Particles from 'react-particles-js'; on top! then paste the properties from Downloaded json file inside Particle tag. Here is the sample: <Particles
canvasClassName="example"
height="120px"
width="300px"
params={{
polygon: {
enable: true,
type: 'inside',
move: {
radius: 10
},
url: 'path/to/svg.svg'
}
}} />

To use custom style then use style={{}} tage before the closing tag of Particle. Example:

style={{width: '100%',

background: `#000000`}}

So, now enjoy the amazing background of your website!

--

--

Md. Abu Bakar

Programmer || Web Developer || Learner || Practitioner