Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bishwenduk029/network
A react component to visualise a graph of nodes and edges for the given data. It is based on vis.js library.
https://github.com/bishwenduk029/network
edges graph network nodes react vis-library visjs visualization
Last synced: 26 days ago
JSON representation
A react component to visualise a graph of nodes and edges for the given data. It is based on vis.js library.
- Host: GitHub
- URL: https://github.com/bishwenduk029/network
- Owner: bishwenduk029
- License: mit
- Created: 2017-06-03T01:24:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-09T05:37:30.000Z (over 7 years ago)
- Last Synced: 2024-12-29T12:47:53.654Z (about 2 months ago)
- Topics: edges, graph, network, nodes, react, vis-library, visjs, visualization
- Language: JavaScript
- Size: 188 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# network-vis
A react component to visualise a graph of nodes and edges for the given data. It is based on vis.js library. Currently, only string nodes are supported.
## Installation
To install this Component, run `npm install network-vis`., Don't forget to install vis.js by running `yarn add vis`.
## Usage
To use the component, In your react Application just do
```javascript
import React, { Component } from 'react';
import Network from 'network-vis';
const containerStyle = {
width: '100vh',
height: '100vh',
}
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
listOfNodes: [],
}
}
async handleNodeClick(node) {
try {
const jsonPromise = await fetch('url for fetching array of strings for each clicked node');
this.setState({
listOfNodes: await jsonPromise.json(),
});
} catch (err) {
console.log('failed');
}
}
return (
);
}
export default MyComponent;
```