react-cytoscape

A React component to use simply the cytoscape js library.


Keywords
cytoscape, graph, react, cytoscapejs, reactjs
License
MIT
Install
npm install react-cytoscape@1.0.6

Documentation

React component for Cytoscape

A React component to use simply the cytoscape js library.

http://js.cytoscape.org

Installation

npm install react-cytoscape

Usage

import ReactCytoscape from 'react-cytoscape';

<ReactCytoscape containerID="cy" 
	elements={this.getElements()} 
	cyRef={(cy) => { this.cy = cy; console.log(this.cy) }} 
	cytoscapeOptions={{wheelSensitivity: 0.1}}
	layout={{name: 'dagre'}} />

ReactCytoscape props

Props are same as Cytoscape builder function.

  • containerID : HTML ID to div cytoscape container

  • elements : Object with nodes and egdes attributes

  • style : Array of Style object

  • layout : Object with name of layout attribute.
    ReactCytoscape integrates cola layout and dagre layout.

  • styleContainer : an object of css style

  • cyRef : a callback function to obtain a reference to cytoscape object

  • cytoscapeOptions : Object with others cytoscape options builder