floatingnodes
1.0.8 • Public • Published
npm install floatingnodes --save
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:
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
|
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
|
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 |
Package Sidebar
Install
Weekly Downloads