reactparticles.js

Independently configurable React component for tsParticles.

Overview

Plug-and-play particles into existing React projects using the same downloadable JSON configuration as the original tsParticles. Configure multiple components independently using seperate JSON files.

Install

npm install reactparticles.js

Props

prop	description	type	required
id	unique identifier	string	yes
config	path to particles configuration file	string	no
style	styles to add or override the default	object	no
className	class name to apply to the component	string	no

Default style

The following style is applied to each instance so it will automatically expand to its parent's height and width. This style can be overridden or expanded by passing an object with the values in as the style prop.

style: {
  position: "absolute" as "absolute",
  display: "block",
  top: "0",
  left: "0",
  height: "100%",
  width: "100%"
 }

Configuration

• Customize and downloaded your config files from the tsParticle site

• Place the config file in your public folder and pass the config file path to your component.

Example use

Below I'm overwriting the default style width and height and adding a background color and opacity.

<Particles
  id="config-1"
  config="particles/config-1.json"
  style={{
    width: "50%",
    height: "50%",
    backgroundColor: "green",
    opacity: "0.5"
  }}
  className="particles-class-name"
/>