How to use Particle.js in your React App

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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store