How to use Particles Js in React with react-tsparticles.

#react #particles #reactparticles #firstpost

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



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