1.0.0 • Published 8 years ago
react-f1-graph v1.0.0
react-f1-graph
A React component that visualizes react-f1
ui.
Usage
Example:
var React = require('react');
var ReactDom = require('react-dom');
var ReactF1Graph = require('react-f1-graph');
ReactDom.render(
<ReactF1Graph
go="out"
states={{
out: [ 10, 10 ],
idle: [ 40, 80 ],
over: [ 190, 70 ],
pressed: [ 280, 20 ]
}},
transitions={[
{ from: 'out', to: 'idle' },
{ from: 'idle', to: 'over', bi: true },
{ from: 'over', to: 'pressed' },
{ from: 'pressed', to: 'out' }
]}
/>,
document.getElementById('container')
);
Props that can be passed to ReactF1Graph
:
go
: Which state you'd like to animate tostates
: An object with x, y positions of each state represented as an Arraytransitions
: Typicalf1
transitionswidth
: Width of the graphheight
: Height of the graphcolorDot
: The color of the dot when renderedsizeDot
: Size of the dot in pixelscolorLine
: The color of all lines connecting transitionswidthLine
: The stroke width of the linecolorArrow
: What colour the arrows will befontLabel
: Font family for the labelscolorLabel
: Color of labels
License
MIT, see LICENSE.md for details.
1.0.0
8 years ago