Floatingnodes NPM

FloatingNodes

Travis Build

Installation & Usage

npm install floatingnodes --save

Include the Component

import React from 'react'
import FloatingNodes from 'floatingnodes'

class Component extends React.Component {
  render() {
    return <FloatingNodes
      width={300}
      height={300}
    />
  }
}

This will produce something like this:
Example image

Props

key	prop type / notes	example
`width`	number (required)	`300`
`width`	number (required)	`300`
`nodeParams`	object	see #nodeParams
`enableNodeDrop`	bool	`true`, `false`
`nodeDropParams`	object	see #nodeDropParams
`enableInteraction`	bool	`true`, `false`
`interactiveNodeParams`	object	see #nodeParams
`initialNodeCount`	number	`25`
`movementUpdateTime`	number(every X seconds each nodes has a 50% chance to update their movement direction)	`0.7`
`enableOutOfBound`	bool (out of bound nodes are getting a new random position)	`true`, `false`
`pauseAnimation`	bool	`true`, `false`

#nodeParams

key	prop type / notes	example
`color`	array (of numbers)	`[0,255,0,0.9]`
`speed`	number (has no effect for `interactiveNodeParams`)	`0.1`
`radius`	number (fixed radius)	`6`
`radiusRange`	object (random radius, has no effect if `radius` is defined, has no effect for `interactiveNodeParams`)	`{min: 2, max: 8}`
`connectionSize`	number	`0.3`
`connectionColor`	array (of numbers)	`[0,0,255]`
`connectionThreshold`	number	`120`
`connectionAlphaDivisor`	number	`8`
`connectionStaticAlpha`	bool/number (if not false `connectionAlphaDivisor` has no effect)	`false`, `0.7`