TSParticles in React.JS
Disclaimer
This is from my experience in many personal projects and use in production software.
TSParticles uses a custom-built rendering engine so you can expect it to affect website performance similar to WebGL or Three.JS
This library can be used in many different frameworks but in this tutorial I will be using React. For more details see the official docs
https://github.com/matteobruni/tsparticles
What is TSParticles?
TSParticles is a lightweight, highly customizable particle animation library written in TypeScript. It allows you to create various particle animations and effects for the web, similar to the discontinued Particles.js library, but with a larger feature set and better performance.
TSParticles supports a wide variety of particle options and interactions, including different shapes, colors, sizes, behaviors, and more. It can be used to create effects like starfields, fireworks, connecting lines, confetti, and much more. The library provides detailed configuration options for controlling every aspect of the particle behavior and appearance, and it also supports responsive designs, adjusting to different viewport sizes.
How to use TSParticles
Prerequisites
- Node.js
- React
- TypeScript
I will be using React with TypeScript so the code within this tutorial will slightly differ if you are using another framework or vanilla JavaScript. See the official docs linked above to find these differences.
Install dependencies
We must first initialize our project and for this I will be using Next.js since it is the recommended approach from the react team.
https://react.dev/learn/start-a-new-react-project
- npm create next-app
Make sure to select TypeScript in the options and the rest can be configured to your liking
- npm install react-tsparticles tsparticles
We must install these dependencies because we will be using components from both.
Configuration
Now that we have all necessary dependencies we can begin adding the minimal code to get a clean and working component that does not bloat the rest of our code.
Inside your src directory create a file that will hold all of the code relevant to TSParticles. It can be named anything you like but I will be calling it particlesComponent.tsx. The reason we do this in a separate file from where you will be calling it is because of how long the options field within the component can get.
Once inside the newly created file, import all relevant packages and components.
Now we create the skeleton of a React functional component. I personally use a VSCode plugin called ES7 React/Redux/GraphQL/React-Native snippets. I highly recommend this because it eliminates much of the boilerplate code you must write when creating a new component. rfce is the command to generate a react functional component but if you are not using VSCode or do not want any additional complexity the code looks like this
After creating the skeleton we can initialize our rendering engine using a callback function. It is fine if you do not understand everything about how this function works, but it is recommended to use this function.
This function must be defined within our functional component to avoid any errors and for it to be within scope of our particles component.
In the return statement we can replace the default div with a particles component that we import from react-tsparticles
Within the particles component we now need a couple of fields, one to call the init function and one to add all of the options
Now we can begin customizing our options, they must follow a specific syntax that is similar to JSON but not identical. You can configure these options however you like and can get very creative with it.
Here is a link to a custom one that I created and your final code should look similar to this
https://github.com/AustinHood7/t3-moon-data/blob/main/src/particlesComponent.tsx
There are also many resources online with templates or info to configure your own
- https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html
- https://github.com/matteobruni/tsparticles/tree/main/utils/configs/src
- https://particles.js.org/samples/index.html#random
Rendering
After all the configuration of the options are done we can finally render our particles component in a concise way.
All that must be done is to call your new component on the page you like it to be rendered on.
It is possible to change the dimensions of the container if you do not want it to take up the entire page. See this YouTube tutorial for more info
