{"id":13503550,"url":"https://github.com/crubier/react-graph-vis","last_synced_at":"2025-05-14T11:10:39.118Z","repository":{"id":30108992,"uuid":"33658802","full_name":"crubier/react-graph-vis","owner":"crubier","description":"A react component to render nice graphs using vis.js","archived":false,"fork":false,"pushed_at":"2023-10-12T09:43:01.000Z","size":2476,"stargazers_count":972,"open_issues_count":60,"forks_count":173,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-11T08:37:31.394Z","etag":null,"topics":["graph","javascript","react","rendered-graphs","visualisation"],"latest_commit_sha":null,"homepage":"http://crubier.github.io/react-graph-vis/","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/crubier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null},"funding":{"github":["crubier"]}},"created_at":"2015-04-09T08:56:41.000Z","updated_at":"2025-03-15T23:40:53.000Z","dependencies_parsed_at":"2023-10-13T07:58:30.162Z","dependency_job_id":null,"html_url":"https://github.com/crubier/react-graph-vis","commit_stats":{"total_commits":89,"total_committers":26,"mean_commits":3.423076923076923,"dds":0.5730337078651686,"last_synced_commit":"463323a317fe1686e6aee2ca86ed41d4413aa114"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crubier%2Freact-graph-vis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crubier%2Freact-graph-vis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crubier%2Freact-graph-vis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crubier%2Freact-graph-vis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crubier","download_url":"https://codeload.github.com/crubier/react-graph-vis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248606507,"owners_count":21132369,"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":["graph","javascript","react","rendered-graphs","visualisation"],"created_at":"2024-07-31T23:00:39.452Z","updated_at":"2025-04-12T17:36:38.013Z","avatar_url":"https://github.com/crubier.png","language":"JavaScript","funding_links":["https://github.com/sponsors/crubier"],"categories":["Libraires","JavaScript","Libraries"],"sub_categories":["vis.js based libraries"],"readme":"# React graph vis\n\nA React component to display beautiful network graphs using vis.js\n\nShow, don't tell: [Demo](http://crubier.github.io/react-graph-vis/)\n\nMake sure to visit [visjs.org](http://visjs.org) for more info.\n\nRendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.\n\n![A graph rendered by vis js](example.png)\n\nDue to the imperative nature of vis.js, updating graph properties causes complete redraw of graph and completely porting it to React is a big project itself!\n\nThis component takes three vis.js configuration objects as properties:  \n\n- graph: contains two arrays { edges, nodes }\n- options: normal vis.js options as described [here](http://visjs.org/docs/network/#options)\n- events: an object that has [event name](http://visjs.org/docs/network/#Events) as keys and their callback as values\n\n# Usage\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Graph from \"react-graph-vis\";\n\nimport \"./styles.css\";\n// need to import the vis network css in order to show tooltip\nimport \"./network.css\";\n\nfunction App() {\n  const graph = {\n    nodes: [\n      { id: 1, label: \"Node 1\", title: \"node 1 tootip text\" },\n      { id: 2, label: \"Node 2\", title: \"node 2 tootip text\" },\n      { id: 3, label: \"Node 3\", title: \"node 3 tootip text\" },\n      { id: 4, label: \"Node 4\", title: \"node 4 tootip text\" },\n      { id: 5, label: \"Node 5\", title: \"node 5 tootip text\" }\n    ],\n    edges: [\n      { from: 1, to: 2 },\n      { from: 1, to: 3 },\n      { from: 2, to: 4 },\n      { from: 2, to: 5 }\n    ]\n  };\n\n  const options = {\n    layout: {\n      hierarchical: true\n    },\n    edges: {\n      color: \"#000000\"\n    },\n    height: \"500px\"\n  };\n\n  const events = {\n    select: function(event) {\n      var { nodes, edges } = event;\n    }\n  };\n  return (\n    \u003cGraph\n      graph={graph}\n      options={options}\n      events={events}\n      getNetwork={network =\u003e {\n        //  if you want access to vis.js network api you can set the state in a parent component using this property\n      }}\n    /\u003e\n  );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003cApp /\u003e, rootElement);\n\n```\n\n\n\n\n\n\n\n\n\n\n\nYou can also check out the demo in the [`example`](https://github.com/crubier/react-graph-vis/tree/master/example) folder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrubier%2Freact-graph-vis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrubier%2Freact-graph-vis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrubier%2Freact-graph-vis/lists"}