reactparticles.js v2.0.1

reactparticles.js

Independently configurable React component for particles.js.

Overview

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

Install

npm install reactparticles.js

Props

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 particle.js 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"
/>