React-Particle-Backgrounds

Simple and customisable animated particle backgrounds for React

Demo

https://mcbp.github.io/React-Particle-Backgrounds-Demo

Install

npm install --save react-particle-backgrounds

Basic Example

The <ParticleBackground /> component takes only one prop: settings.

It is defined as an object with specific shape, this is detailed below in the example code.

import React from 'react'
import ParticleBackground from 'react-particle-backgrounds'

const App = () => {

  const settings = {
    canvas: {
      canvasFillSpace: true,
      width: 200,
      height: 200,
      useBouncyWalls: false
    },
    particle: {
      particleCount: 50,
      color: '#94ecbe',
      minSize: 2,
      maxSize: 5
    },
    velocity: {
      directionAngle: 0,
      directionAngleVariance: 360,
      minSpeed: 1,
      maxSpeed: 3
    },
    opacity: {
      minOpacity: 0,
      maxOpacity: 0.5,
      opacityTransitionTime: 3000
    }
  }

  return <ParticleBackground settings={settings} />

}

export default App

Prop Types

The accepted prop types and their default values are listed below

Property	Type	Default Value	Description
canvasFillSpace	Boolean	`true`	Determines if the component will fill the width and height of it's parent container.
width	Number	`200`	Width of component in px, `canvasFillSpace` set to true will override this value.
height	Number	`200`	Height of component in px, `canvasFillSpace` set to true will override this value.
useBouncyWalls	Boolean	`false`	Controls whether particles pass through walls and out the other side, or bounce off the borders.
particleCount	Number	`50`	Number of particles rendered.
color	String	`'#94ecbe'`	Color of the particles, must be either hex or rgb.
minSize	Number	`null`	Smallest possible size for each particle. When set to null all particles will be drawn at `maxSize`.
maxSize	Number	`5`	Largest possible size for each particle.
directionAngle	Number	0	Direction of travel of particles in degrees, 0 being upwards.
directionAngleVariance	Number	180	Defines a range for directionAngle. Maximum angle being `directionAngle + directionAngleVariance` and minimum being `directionAngle - directionAngleVariance`.
minSpeed	Number	`null`	Smallest possible speed for each particle. When set to null all particles will be set to the value of `maxSpeed`.
maxSpeed	Number	`1`	Largest possible speed for each particle.
minOpacity	Number	`null`	Lowest possible opacity for each particle. When set to null all particles will be drawn at the value of `maxOpacity`.
maxOpacity	Number	`1`	Largest possible opacity for each particle.
opacityTransitionTime	Number	`3000`	Time in ms for particles to transition from `minOpacity` to `maxOpacity`.

License