Added onClick handler to individual vertices. Better example

Author: mehulmpt

README.md

@@ -8,34 +8,59 @@ A simple react component to draw branched graphs consisting of vertices and edge
 3. Use directly in render function. Here's an example explaining all possible props you can pass:
 
 ```jsx
-<Graph
-	vertices={[ // all possible edges
-		"HTML",
-		"CSS",
-		"jQuery",
-		"JavaScript",
-		"PHP",
-		"Python",
-		"Perl",
-		"Ruby"
-	]}
-	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
-		["HTML","CSS"],
-		["CSS", "jQuery"],
-		["jQuery","JavaScript"],
-		["jQuery", "PHP"],
-		["PHP", "Python"],
-		["Python", "Perl"],
-		["Python", "Ruby"]
-	]}
-	orientation="horizontal" // orientation of graph (whether horizontal or vertical)
-	width={window.innerWidth} // width of graph
-	height={window.innerHeight} // height of graph
-	vertexStroke="#df6766" // color of border of vertices
-	edgeStroke="#ebb2b2" // color of edge
-	edgeWidth={2} // thickness of edge
-	vertexRadius={10} // radius of vertex -> bigger the radius, larger the vertex size
-/>
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Graph from 'reactjs-graphs'
+
+const onClick = (label, index, extras) => {
+	console.log(label, index, extras)
+}
+
+const vertices = [
+	{ label: "Here it begins", onClick, extras: "Some helper data" },
+	{ label: "HTML", onClick },
+	{ label: "CSS", onClick },
+	{ label: "Sass", onClick },
+	{ label: "JavaScript", onClick },
+	{ label: "Bootstrap", onClick },
+	{ label: "jQuery", onClick },
+	{ label: "ReactJS", onClick, extras: "Could be anything, literally" },
+	{ label: "Jest", onClick },
+	{ label: "Angular", onClick },
+	{ label: "Vue", onClick },
+	{ label: "Redux", onClick },
+	{ label: "React Material", onClick },
+	{ label: "Vuetify", onClick },
+]
+
+const edges = [
+	["Here it begins", "HTML"],
+	["HTML", "CSS"],
+	["CSS", "JavaScript"],
+	["CSS", "Sass"],
+	["JavaScript", "jQuery"],
+	["jQuery", "Bootstrap"],
+	["jQuery", "ReactJS"],
+	["jQuery", "Angular"],
+	["jQuery", "Vue"],
+	["ReactJS", "Redux"],
+	["Redux", "React Material"],
+	["React Material", "Jest"],
+	["Vue", "Vuetify"],
+]
+
+
+ReactDOM.render(<Graph 
+	vertices={vertices}
+	edges={edges}
+	orientation="horizontal"
+	width={window.innerWidth}
+	height={window.innerHeight}
+	vertexStroke="#df6766"
+	edgeStroke="#ebb2b2"
+	edgeWidth={2}
+	vertexRadius={10}
+/>, document.getElementById('root'))
 ```
 
 4. The example above would render the following graph:

graph.png

@@ -1,6 +1,6 @@
 {
 	"name": "reactjs-graphs",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Create branched graphs in ReactJS",
 	"main": "build/index.js",
 	"scripts": {

package.json

@@ -15,7 +15,7 @@ export default class Graph extends React.Component {
 		}
 
 		props.vertices.forEach((vertex, index) => {
-			this.state.list.push({ name: vertex, next: [] })
+			this.state.list.push({ name: vertex.label, next: [] })
 		})
 
 		props.edges.map(edge => {
@@ -94,19 +94,19 @@ export default class Graph extends React.Component {
 		let flag = false
 
 		props.vertices.forEach(vertex => {
-			if(vertex in this.state.vertexCoordinates) {
+			if(vertex.label in this.state.vertexCoordinates) {
 				// ok
 			} else {
 				if(flag) throw new Error("Initializing the graph with multiple vertices? Only 1 vertex is supported for now")
 				// this is the first vertex which was not registered in the for-loop above
 				flag = true
 				if(this.props.orientation === 'horizontal') {
-					this.state.vertexCoordinates[vertex] = {
+					this.state.vertexCoordinates[vertex.label] = {
 						x: 0,
 						y: totalYAllowed/2
 					}
 				} else {
-					this.state.vertexCoordinates[vertex] = {
+					this.state.vertexCoordinates[vertex.label] = {
 						x: totalYAllowed/2,
 						y: 0
 					}
@@ -167,10 +167,10 @@ export default class Graph extends React.Component {
 					{vertices.map((vertex, index) => {
 						return <Vertex
 									key={index}
-									x={vertexCoordinates[vertex].x}
-									y={vertexCoordinates[vertex].y}
-									label={vertex}
-									onClick={_ => alert(vertex)}
+									x={vertexCoordinates[vertex.label].x}
+									y={vertexCoordinates[vertex.label].y}
+									label={vertex.label}
+									onClick={_ => vertex.onClick(vertex.label, index, vertex.extras)}
 									{...vertexProps}
 								/>
 						})

source/Graph.js

@@ -1,30 +1,51 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Graph from '../build/index'
+import Graph from './Graph'
+
+const onClick = (label, index, extras) => {
+	console.log(label, index, extras)
+}
+
+const vertices = [
+	{ label: "Here it begins", onClick, extras: "Some helper data" },
+	{ label: "HTML", onClick },
+	{ label: "CSS", onClick },
+	{ label: "Sass", onClick },
+	{ label: "JavaScript", onClick },
+	{ label: "Bootstrap", onClick },
+	{ label: "jQuery", onClick },
+	{ label: "ReactJS", onClick },
+	{ label: "Jest", onClick },
+	{ label: "Angular", onClick },
+	{ label: "Vue", onClick },
+	{ label: "Redux", onClick },
+	{ label: "React Material", onClick },
+	{ label: "Vuetify", onClick },
+]
+
+const edges = [
+	["Here it begins", "HTML"],
+	["HTML", "CSS"],
+	["CSS", "JavaScript"],
+	["CSS", "Sass"],
+	["JavaScript", "jQuery"],
+	["jQuery", "Bootstrap"],
+	["jQuery", "ReactJS"],
+	["jQuery", "Angular"],
+	["jQuery", "Vue"],
+	["ReactJS", "Redux"],
+	["Redux", "React Material"],
+	["React Material", "Jest"],
+	["Vue", "Vuetify"],
+]
+
 
 ReactDOM.render(<Graph 
-	vertices={[
-		"HTML",
-		"CSS",
-		"jQuery",
-		"JavaScript",
-		"PHP",
-		"Python",
-		"Perl",
-		"Ruby"
-	]}
-	edges={[
-		["HTML","CSS"],
-		["CSS", "jQuery"],
-		["jQuery","JavaScript"],
-		["jQuery", "PHP"],
-		["PHP", "Python"],
-		["Python", "Perl"],
-		["Python", "Ruby"]
-	]}
+	vertices={vertices}
+	edges={edges}
 	orientation="horizontal"
 	width={window.innerWidth}
-	height={167}
+	height={window.innerHeight}
 	vertexStroke="#df6766"
 	edgeStroke="#ebb2b2"
 	edgeWidth={2}