Creating an Interactive Background Using the tsparticles Library in a React App
In the process of developing my personal website to display my projects and blogposts I wanted to standout and have my site pop. I initially wanted to use a twinkling starry night background using the linked codepen that a cohort-mate had recommended. After researching how to implement the code into my React App I came across the the tsparticles library created by github user matteobruni. tsparticles consists of many effects that can be customized to your liking. Below is the initial welcome page to my site as an example. As you can see, it is a web of connected particles that are repelled by the cursor and more particles can be created by clicking on the screen.
I loved the aesthetic as well as as the interact-ability but I spent an entire morning figuring out how to properly set it up as I couldn’t find a step-by-step resource.
Step 1: Install the package using your preferred package manager. In my case I was creating a react app so my library installation command was: npm install react-tsparticles
Step 2: I made the background of my app a separate component. The imports and JSX returned by the component look like the below:
Step 3: If you’ve noticed only 2 props have been passed in, an id and the options props. From this step you can go to the demo site located here, click the demos button and find a preset / example that you would like to use. For my own site I chose to modify the twinkle preset. Much credit to matteobruni for crafting the site so that you can update the form and reload the effects to see what each option does.
Step 4: Once you are satisfied with the tsparticles effect go to the form tab and select preview.
This will load up an object with your selected options setup. If you remember from step 2 and options prop is needed to be passed down to the Particles component, this is that object.
Step 5: Declare an options object within the body of your Background component and copy and paste the object from the preview tab in step 4.
Do not be alarmed by the size of the options, it goes to show how modular the package is. If you would like to see my setup please visit my github repo located here. The prop ‘entered’ is a boolean value that updates once the user ‘enters’ my website.
Changing the zIndex once a user has entered removes the interact-ability so that a user can click on the other links on my site without being distracted by the repulsion or creation of new particles. I’ll leave the extra functionality of your own website to your own discretion.
Step 6: Import your background component into your main file (assuming it’s App.js) and set it as the first component to be returned in the JSX.
Final Notes:
There are so many options to choose from, I suggest playing around with them on the demo site. I enjoyed learning this library as well as implementing it onto my personal site. Feel free to send me your own set ups and again all credit for this library goes to matteobruni as well as the numerous contributors on github.
