How to Use Particles.js in React Project ?

Particles.js is a dependency-free, light-weighted and responsive JavaScript plugin for flexible and reactive particles like design which looks like this.

ParticleJs Image

We can add Particles.js in our react project by using react-particles. Adding this to your react project will surely attract more audiences.

1. Installation Process: Run the following command on terminal to install Particles.js

For npm:
```
npm install react-particles-js
```
For yarn:
```
yarn add react-particles-js
```

Install react-particles-js

2. Import the packages: Import the package in your file. To import the package paste the following code:

import Particles from 'react-particles-js';

importing react-particles-js

3. Render: Inside return of render function of your component add the element <particles />. Some important props are:

width: Width of Canvas.
Height: Height of Canvas.
Params: Parameter to be passed.

Example:

// Complete React Code 
import React from 'react'; 
import './App.css'; 
import Particles from 'react-particles-js'; 
   
function App() { 
  return ( 
    <div className="App"> 
      By Ankit Bansal 
      <Particles 
        params={{ 
          particles: { 
            number: { 
              value: 200, 
              density: { 
                enable: true, 
                value_area: 1000, 
              } 
            }, 
          }, 
        }} 
      /> 
   
    </div> 
  ); 
} 
   
export default App; 

Render

4. Start Start the npm by using npm start command and you will get a great attractive background.

last output

Note: Add <particles /> element as the last element in your returning div.

My Personal Notes

Recommended Posts: