FloatingNodes

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:

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

#nodeDropParams

key | prop type / notes | example ----|---------|------ amount | number (nodes per drop) | 3 limit | number (removes nodes over limit, 0 means no limit) | 6 nodeDropParams | object | see #nodeParams