Skip to content

Commit 7aeb605

Browse files
committed
Added README.md
1 parent 6b2ddf1 commit 7aeb605

File tree

2 files changed

+43
-0
lines changed

2 files changed

+43
-0
lines changed

README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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)

graph.png

41 KB
Loading

0 commit comments

Comments
 (0)