{"id":24385623,"url":"https://github.com/bishwenduk029/network","last_synced_at":"2026-05-07T06:38:55.087Z","repository":{"id":57310396,"uuid":"93215352","full_name":"bishwenduk029/network","owner":"bishwenduk029","description":"A react component to visualise a graph of nodes and edges for the given data. It is based on vis.js library. ","archived":false,"fork":false,"pushed_at":"2017-07-09T05:37:30.000Z","size":192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T16:50:41.284Z","etag":null,"topics":["edges","graph","network","nodes","react","vis-library","visjs","visualization"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bishwenduk029.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-03T01:24:11.000Z","updated_at":"2017-07-09T05:46:49.000Z","dependencies_parsed_at":"2022-09-07T20:21:32.386Z","dependency_job_id":null,"html_url":"https://github.com/bishwenduk029/network","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bishwenduk029%2Fnetwork","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bishwenduk029%2Fnetwork/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bishwenduk029%2Fnetwork/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bishwenduk029%2Fnetwork/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bishwenduk029","download_url":"https://codeload.github.com/bishwenduk029/network/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243269006,"owners_count":20263965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["edges","graph","network","nodes","react","vis-library","visjs","visualization"],"created_at":"2025-01-19T11:19:41.904Z","updated_at":"2025-12-27T09:19:09.895Z","avatar_url":"https://github.com/bishwenduk029.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# network-vis\nA 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.  \n\n\n## Installation\n\nTo install this Component, run `npm install network-vis`., Don't forget to install vis.js by running `yarn add vis`.\n\n\n## Usage\n\nTo use the component, In your react Application just do\n\n```javascript\nimport React, { Component } from 'react';\nimport Network from 'network-vis';\n\nconst containerStyle = {\n  width: '100vh',\n  height: '100vh',\n}\n\nclass MyComponent extends Component {\n\n    constructor(props) {\n      super(props);\n      this.state = {\n        listOfNodes: [],\n      }\n    }\n\n    async handleNodeClick(node) {\n      try {\n        const jsonPromise = await fetch('url for fetching array of strings for each clicked node');\n        this.setState({\n            listOfNodes: await jsonPromise.json(),\n        });\n      } catch (err) {\n          console.log('failed');\n      }\n    }\n\n    return (\n      \u003cdiv style={containerStyle}\u003e\n        \u003cNetwork\n            outgoing='true'\n            root='MainNode'\n            subNodes={this.state.listOfNodes}\n            onNodeClick={this.handleNodeClick}\n        /\u003e\n      \u003c/div\u003e\n    );\n\n}\n\nexport default MyComponent;\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbishwenduk029%2Fnetwork","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbishwenduk029%2Fnetwork","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbishwenduk029%2Fnetwork/lists"}