File tree Expand file tree Collapse file tree 2 files changed +43
-0
lines changed
Expand file tree Collapse file tree 2 files changed +43
-0
lines changed Original file line number Diff line number Diff line change 1+ # ReactJS Graphs
2+ A simple react component to draw branched graphs consisting of vertices and edges.
3+
4+ # How To Use?
5+
6+ 1 . Install using ` npm install reactjs-graphs --save `
7+ 2 . Import in your react project: ` import Graph from 'reactjs-graphs' `
8+ 3 . Use directly in render function. Here's an example explaining all possible props you can pass:
9+
10+ ``` jsx
11+ < Graph
12+ vertices= {[ // all possible edges
13+ " HTML" ,
14+ " CSS" ,
15+ " jQuery" ,
16+ " JavaScript" ,
17+ " PHP" ,
18+ " Python" ,
19+ " Perl" ,
20+ " Ruby"
21+ ]}
22+ edges= {[ // edges between nodes. Please draw a graph on paper first and see for yourself how the edges flow to place a suitable array value here
23+ [" HTML" ," CSS" ],
24+ [" CSS" , " jQuery" ],
25+ [" jQuery" ," JavaScript" ],
26+ [" jQuery" , " PHP" ],
27+ [" PHP" , " Python" ],
28+ [" Python" , " Perl" ],
29+ [" Python" , " Ruby" ]
30+ ]}
31+ orientation= " horizontal" // orientation of graph (whether horizontal or vertical)
32+ width= {window .innerWidth } // width of graph
33+ height= {window .innerHeight } // height of graph
34+ vertexStroke= " #df6766" // color of border of vertices
35+ edgeStroke= " #ebb2b2" // color of edge
36+ edgeWidth= {2 } // thickness of edge
37+ vertexRadius= {10 } // radius of vertex -> bigger the radius, larger the vertex size
38+ / >
39+ ```
40+
41+ 4 . The example above would render the following graph:
42+
43+ ![ Demo] ( https://raw.githubusercontent.com/codedamn/reactjs-graphs/master/graph.png )
You can’t perform that action at this time.
0 commit comments