Moving Particles Background In ReactJS

prem1835 — Sun, 26 Jul 2020 11:06:28 +0000

So you're a beginner in web development like me. And many times when you visit some websites that have amazing moving backgrounds, you become curious to know, how they implement it.
Else like me "they must be genius" :)

So today I'm going to show you the process of how to implements Moving Particles Background in your own website or how to create an eye-catching portfolio website using TypeScript library called tsParticles.

How to install tsParticles component

Open your terminal and go to location of your ReactJS project. And type following command.

npm install react-tsparticles

yarn add react-tsparticles

This will install a ReactJS component in your project.

If you're starting with a brand-new project than you can simply type this command and it will install this component with the create-react-app. Put name of your project in the place of "your_app"

create-react-app your_app --template particles

How to use

Now you have to import it in your component where you want to implement it. You can also make a separate component for tsparticles and import it on top like this

import Particles from "react-tsparticles";

After importing it in your component, you can use the <Particles /> in your code.

Now You have to pass props to this component to make this background effect work and you can also change and play around with properties to experiments with different effects

<Particles
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: "#ffffff",
            },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            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.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      />

Now you have to render <Particles /> component and you will see magical effects. I'm sure, it will bring smile on your face :)

You can check this Official tsParticles ReactJS GitHub repository for more details explanation

Thank you for reading this post, I hope it helps you.

This is my first ever post so feedbacks and suggestions are welcome!

DEV Community: prem1835

Moving Particles Background In ReactJS

How to install tsParticles component

How to use