It makes easy to publish networks on Web pages and allows developers to integrate network exploration in rich Web applications. Use JSX for graph configuration, including asynchronous graph loading. Library is lightweight and modular, so you can bundle only what you use. Easy to extend with additional components.

• Usage
• Components reference
• Sigma
• SigmaEnableWebGL
• Extending sigma components
• Components composition
• Types

See storybook for working examples.

Please make sure to read CONTRIBUTION prerequisites section if you want to fork & change or contribute.

npm install --save react-sigma

or

yarn add react-sigma

or

bower install https://unpkg.com/[email protected]/dist/react-sigma.min.js

If you don't want to use webpack or browserify, you could always reference the single file distribution, library will be available under global var ReactSigma:

<script src="https://unpkg.com/[email protected]/dist/react-sigma.min.js"/>

import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';
...
let myGraph = {nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]};
...
<Sigma graph={myGraph} settings={{drawEdges: true, clone: false}}>
  <RelativeSize initialSize={15}/>
  <RandomizeNodePositions/>
</Sigma>

Note that graph nodes require x, y and size defined in order to be displayed, plugins like RelativeSize and RandomizeNodePositions might help to generate those. Sigma updates graph positions, therefore if to keep track of nodes in this example we use <Sigma settings={{clone: false}}>

import {Sigma, LoadJSON} from 'react-sigma'
...
<Sigma style={{width:"200px", height:"200px"}}>
  <LoadJSON path="/public/data.json" />
</Sigma>

...
<Sigma renderer="canvas">
	<EdgeShapes default="tapered"/>
	<NodeShapes default="star"/>
	<LoadGEXF path={String(process.env.PUBLIC_URL) + "/arctic.gexf"}>
		<Filter neighborsOf={ this.state.filterNeighbours } />
		<ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} iterationsPerRender={10} linLogMode timeout={3000}/>
		<RelativeSize initialSize={15}/>
	</LoadGEXF>
</Sigma>

Minimized sigma with minimum required functionality is 76kb, more when plugins added. Using webpack2 or rollup nothing need to be done. Webpack1 does not support tree shaking and require explicit submodules import to bundle only what's been used, e.g.:

import Sigma from 'react-sigma/lib/Sigma'
import LoadJSON from 'react-sigma/lib/LoadJSON'

Please see react-sigma reference for details. Below is a brief concept.

Sigma is the main component which reserves

<Sigma renderer="webgl" style={{maxWidth:"inherit", height:"400px"}}
		settings={{drawEdges:false}}
		onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}>
		graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>
	<RelativeSize initialSize={8} />
</Sigma>

import { Sigma, SigmaEnableWebGL } from 'react-sigma'
...
<Sigma /> // will use webgl renderer if supported by browser

import { Sigma, SigmaEnableSVG } from 'react-sigma'
...
<Sigma renderer="svg" /> 

class MyCustomSigma extends React.Component {
	constructor(props) {
		super(props)
		props.sigma.graph.addNode({id:"n3", label:props.label})
	}
}
...
return  <Sigma>
	<MyCustomSigma label="Label">
</Sigma>

<Sigma>
	<LoadJSON url="/arctic.json">
		<RelativeSize initialSize={8}/>
	</LoadJSON>
</Sigma>