react-sigmajs
Advanced tools
Comparing version 0.4.17 to 0.5.0
@@ -5,3 +5,3 @@ { | ||
"author": "Maxim Vorobjov <maxim.vorobjov@gmail.com>", | ||
"version": "0.4.17", | ||
"version": "0.5.0", | ||
"license": "MIT", | ||
@@ -32,3 +32,4 @@ "bugs": "https://github.com/dunnock/react-sigma/issues", | ||
"fast graph", | ||
"graph drawing" | ||
"graph drawing", | ||
"react-component" | ||
], | ||
@@ -97,4 +98,4 @@ "devDependencies": { | ||
"peerDependencies": { | ||
"react": ">=0.14.0", | ||
"react-dom": ">=0.14.0" | ||
"react": ">=15.3", | ||
"react-dom": ">=15.3" | ||
}, | ||
@@ -101,0 +102,0 @@ "scripts": { |
@@ -1,2 +0,2 @@ | ||
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, so no callback is needed. Library is lightweight and modular, so you can bundle only what you use. Easy to extend with additional components. | ||
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. | ||
@@ -13,5 +13,8 @@ ## Table of Contents | ||
![sample graph](https://github.com/dunnock/react-sigma/blob/master/public/sm_graph.png) | ||
# Usage | ||
See [storybook for working examples](https://dunnock.github.io/react-sigma/). | ||
## Install | ||
@@ -51,3 +54,3 @@ | ||
<Sigma style={{width:"200px", height:"200px"}}> | ||
<LoadJSON path="/public/data.json"> | ||
<LoadJSON path="/public/data.json" /> | ||
</Sigma> | ||
@@ -70,8 +73,6 @@ ``` | ||
See [storybook for detailed usage examples](https://dunnock.github.io/react-sigma/). | ||
## Minimizing bundle | ||
Minimized sigma with minimum required functionality is 76kb, more when plugins added. | ||
Using webpack2 or rollup nothing need to be done to minimize bundle code, though previous generation of bundlers which does not support tree shaking, like webpack1, require explicit submodules import to be able to optimize, e.g.: | ||
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.: | ||
``` | ||
@@ -86,5 +87,5 @@ import Sigma from 'react-sigmajs/lib/Sigma' | ||
## Sigma | ||
## Sigma | ||
Sigma is the main component which reserves <div> area with a given style (default is full width, 500px height), | ||
Sigma is the main component which reserves <div> area with a given style (default is full width, 500px height), | ||
initializes renderer and camera in the given area and starts rendering graph. | ||
@@ -104,7 +105,7 @@ <Sigma> be composed with sigma plugins using JSX syntax, e.g.: | ||
By default sigma package includes only canvas rendering functions, though it can be easily extended with WebGL. | ||
Importing SigmaEnableWebGL enables WebGL renderer, setting it as default renderer if WebGL is supported by browser. | ||
By default sigma package includes only canvas rendering functions with webpack2, though it can be easily extended with WebGL. Importing SigmaEnableWebGL enables WebGL renderer, setting it as default renderer if WebGL is supported by browser. With webpack1 webgl rendering functions are imported by default, so you don't need to worry. | ||
``` | ||
import {Sigma, SigmaEnableWebGL} from './react-sigmajs' | ||
import { Sigma, SigmaEnableWebGL } from 'react-sigmajs' | ||
... | ||
<Sigma /> // will use webgl renderer if supported by browser | ||
@@ -121,3 +122,3 @@ ``` | ||
super(props) | ||
props.sigma.graph.addNode({id:"n3", label:props.label}); | ||
props.sigma.graph.addNode({id:"n3", label:props.label}) | ||
} | ||
@@ -124,0 +125,0 @@ } |
2970706
146