How to use Particles Js in React with react-tsparticles.
Tags: react, particles, reactparticles, firstpost
Published: 2022-05-25 18:31:00

{% embed https://www.youtube.com/watch?v=u8y2vCkZubk %}
Particle.js is a great JavaScript library for creating 2d as well as 3d looking particles on your website.

But using Particle.js is not an easy task so there is a new version of Particles.js created for Component-based frameworks like React, Vue, and Angular which is rewritten in TypeScript and is called TsParticles and has a special package for easy integration in React called as react-tsparticles.
react-tsparticles is an awesome package for creating particles in React.js.

## Prerequisites
Create a new React app with `npx create-react-app my-app` or you can continue with your existing app if you have already created.

Now we'll have an `App.js` file in my case here it is after some editing.

```
import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

```

## How to use `react-tsparticles` in React.js

First of all you have to install `react-tsparticles` as well as `tsparticles` as `react-tsparticles` depends upon it.


`npm i react-tsparticles`
`npm i tsparticles`

if any legacy error shows up use --force 

`npm i react-tsparticles --force`
`npm i tsparticles --force`


Now import Particles from react-tsparticles and  { loadFull } from tsparticles.

```
import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

```

Now we can use Particles component by passing some props such as `id `, `init` which is going to be an initialization function, `options` which is going to be the configurations for particles that we want to display or `url` to use options from a remote url with a json url.
[Link to tsparticles options presets](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets)

```
import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {

  

  return (
    <div className="App">
      <h1>Hello Coders!</h1>

      <Particles id="particles-here" init={anInitFunction} options={
        // an config object
      } />
      
    </div>
  );
}

```

Below is the working code for above method

```
import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {
  const particlesInit = async (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };

  return (
    <div className="App">
      <h1>Hello Coders!</h1>

       <Particles
      id="tsparticles"
      init={particlesInit}
  
      options={{
        "fullScreen": {
            "enable": true,
            "zIndex": 1
        },
        "particles": {
            "number": {
                "value": 10,
                "density": {
                    "enable": false,
                    "value_area": 800
                }
            },
            "color": {
                "value": "#fff"
            },
            "shape": {
                "type": "star",
                "options": {
                    "sides": 5
                }
            },
            "opacity": {
                "value": 0.8,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 1,
                    "opacity_min": 0.1,
                    "sync": false
                }
            },
            "size": {
                "value": 4,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 40,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "rotate": {
                "value": 0,
                "random": true,
                "direction": "clockwise",
                "animation": {
                    "enable": true,
                    "speed": 5,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance": 600,
                "color": "#ffffff",
                "opacity": 0.4,
                "width": 2
            },
            "move": {
                "enable": true,
                "speed": 2,
                "direction": "none",
                "random": false,
                "straight": false,
                "out_mode": "out",
                "attract": {
                    "enable": false,
                    "rotateX": 600,
                    "rotateY": 1200
                }
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": ["grab"]
                },
                "onclick": {
                    "enable": false,
                    "mode": "bubble"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 400,
                    "line_linked": {
                        "opacity": 1
                    }
                },
                "bubble": {
                    "distance": 400,
                    "size": 40,
                    "duration": 2,
                    "opacity": 8,
                    "speed": 3
                },
                "repulse": {
                    "distance": 200
                },
                "push": {
                    "particles_nb": 4
                },
                "remove": {
                    "particles_nb": 2
                }
            }
        },
        "retina_detect": true,
        "background": {
            "color": "#111",
            "image": "",
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover"
        }
    }}
    />
    </div>
  );
}

```

and you'll get this 

![Generated particles from react-tsparticles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th0vjwi6pc2ehgd7ab1v.png)

now you can mess around with options and below is the GitHub repo of list of different presets that you can use to get different particles.


[Read this on my blog.](https://tutorend.com/tutorials/how-to-use-particles-js-in-react-with-react-tsparticles)

PS: This is my first post and I am looking for your suggestions and of course I'll improve this post with more information.