neo4j-graph-renderer

Since neo4j does not provide a way to render its graphs, I've created a react component that can be used in order to render a neo4j graph (with all the animations, etc).

Installation

If you are using create-react-app:

# using NPM
$ npm install neo4j-graph-renderer --save
# using yarn
$ yarn add neo4j-graph-renderer

If you are not using create-react-app, please install the following:

$ npm install style-loader --save-dev  # style-loader for webpack
$ npm install css-loader --save-dev    # css-loader for webpack

Usage

// Using ES6 Syntax
import React from 'react';
import ReactDOM from 'react-dom';
import { Neo4jGraphRenderer } from 'neo4j-graph-renderer';

const App = () => (
  <div>
     <Neo4jGraphRenderer url={process.env.NEO4J_URL} user={process.env.NEO4J_USER}
        password={process.env.NEO4J_PASSWORD} query="MATCH (n)-[r]->(m) RETURN n,r,m"/>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

Props you must provide:

• url: the url required to access your neo4j db (e.g. "http://localhost:7474")
• user: the username required to access your neo4j db
• password: the password required to access your neo4j db
• query: the query you'd like to execute

Furthermore you can provide an onClickHandler as an optional prop of Neo4jGraphRenderer. The handler will be triggered whenever a node is clicked and will give back more details e.g. properties. For instance, you might want to set the attribute as onClick={(node)=>node.propertyMap} to retrieve the properties of the corresponding node.

& There you go! Your neo4j graph has been rendered!

NOTE: If you would like to add any extra CSS or your own font, the graph is generated in a div with id "graph"

Issues

If you find a bug, please file an issue on the issue tracker on GitHub.