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:

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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;

chevron_right


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.

react-js-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.