A tsParticle Article

Today I’m going to write an article about an amazing Javascript library I recently discovered called tsParticles. This library allows you easily implement “floating particles” to your web application, and it comes with so many different customizable options. This is one of those libraries that will make your jaw drop as a developer with how easy it is to implement. Not to mention how cool it looks! I would like to demonstrate how to set up a React app with tsParticles, and then explain some of the customizable options for y’all to see. Feel free to check out the official documentation here at any time. If you check out the homepage you will notice different documentations for a couple different JavaScript frameworks such as React, Vue, and Angular. I’m going to build a React app, so we will focus on that. I’m not going to get into every customizable option available as I’m going to simply break the ice.

npx create-react-app my-app

First and foremost, let’s create a react app. I’m going to name my app “particle-example”. Once the app is created, I will open it. I’m going to open the App.js file and delete everything inside of the div tag in the return. I’m also going to create a new js file called Home.js. Normally, I would create a folder called components to place the new component js file into, but I’m going to skip that step as this will be the only js file/component I will create. I will make the Home.js a functional component and then import the component into my App.js file. Below is a screenshot of my Home.js

The only thing I’m returning right now is a header with the title, “Particles Example”

And here is a screenshot of my App.js where I imported the Home.js

I deleted everything inside the div tag, and after importing Home, it is the only component I’m returning.

With all of that currently set up, my browser looks like the screenshot below when my server is running.

The only information we see if the header from the Home component

Now we can install our JavaScript library for tsParticles and add some particles! I will enter the following command into my terminal.

npm install react-tsparticles

You can also check out the documentation specifically for React here. After that command finishes running, we can start our server back up. Then we will go back to our Home.js to add the import and the Particles tag. After doing just such, my Home.js looks like the screenshots below.

import React from 'react'
import Particles from "react-tsparticles";
const Home = () => {
   return (
      <div>
         <h1>Particles Example</h1>
         <Particles
           id="tsparticles"
           options={{
             fpsLimit: 60,
             interactivity: {
                detectsOn: "canvas",
                events: {
                   onClick: {
                     enable: true,
                     mode: "bubble",
                   }
                },
                modes: {
                  bubble: {
                    distance: 400,
                    duration: 2,
                    opacity: 0.8,
                    size: 40,
                  },
                  push: {
                    quantity: 4,
                  },
                  repulse: {
                    distance: 200,
                    duration: 0.4,
                  },
               },
           },
           particles: {
             color: {
               value: "random",
             },
             collisions: {
               enable: true,
             },
             move: {
               direction: "none",
               enable: true,
               outMode: "bounce",
               random: false,
               speed: 6,
              straight: false,
             },
             number: {
               density: {
                 enable: true,
                 value_area: 800,
               },
               value: 80,
            },
            opacity: {
              value: 0.8,
            },
            shape: {
              type: "star",
            },
            size: {
              random: true,
              value: 5,
             },
          },
          detectRetina: true,
       }}
      />
    </div>
  )
}
export default Home

I know it may look like a lot, but it isn’t bad once you break it down. I only added one tag, Particles, to the div tag that already contained the header. There are a couple examples you can copy and mess with from the documentation to get a better understanding as well. Once saved, my browser looks like the screenshot below.

This is a still image. On my actual browser the stars are flying around everywhere.

Pretty sweet right?! That is it! I would like to break down some of options I used here to provide a better explanation. As always you can always check out the official documentation for all the customizable options here.

id — this allows a user to customize the height, width, and some other styling options in the css. This is great when making a website responsive and resizing is necessary. You can also set the width and height in the Particles tag outside of the options object if you like as well.

options — contains an object with all of the customizable features. You can check out all of them at the above link.

fpsLimit — puts a limit on the frames per second for performance control

interactivity — contains an object with features pertaining to user interactivity. You can use features like onClick and onHover. I used onClick so when you click anywhere in the canvas, the stars will bubble up and explode! Modes are the settings for the different options for hover and click events.

particles — contains an object with settings pertaining to the actually particles. You can change the color, size, the motion/direction, if collisions are allowed, opacity, shape, and even more. There about 7 or 8 different shapes you can choose from including circles, squares, hearts, triangles, and more. When setting a color, you can select one color, random (which will display a bunch of random colors), or you can set as many different colors as you like inside of an array. For size, you can set them all to the same size or to random different sizes. When you do that the value for size will set the max value for the random particles.

You now have fancy particles flying all over your web app! I hope this article inspires you mess around with tsParticles yourself and see what cool creations you can come up with. My favorite thing about them is how easy they are to implement and customize. Feel free to reach out to me on LinkedIn or visit my portfolio site. Thanks for reading!!