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.






// 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: {
            number: {
              value: 200,
              density: {
                enable: true,
                value_area: 1000,
export default App;



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 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 or mail your article to 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.