{"id":18973548,"url":"https://github.com/anishmprasad/vis-react","last_synced_at":"2025-04-19T16:39:11.336Z","repository":{"id":57392901,"uuid":"98084938","full_name":"anishmprasad/vis-react","owner":"anishmprasad","description":"Data visualization library based on vis.js","archived":false,"fork":false,"pushed_at":"2023-01-16T17:46:15.000Z","size":728,"stargazers_count":28,"open_issues_count":10,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T10:12:23.222Z","etag":null,"topics":["graph","hammerjs","knowledge-graph","network-graph","react","reactjs","visjs"],"latest_commit_sha":null,"homepage":null,"language":null,"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/anishmprasad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-23T08:34:15.000Z","updated_at":"2025-01-12T04:07:03.000Z","dependencies_parsed_at":"2023-02-10T05:16:03.482Z","dependency_job_id":null,"html_url":"https://github.com/anishmprasad/vis-react","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/anishmprasad%2Fvis-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fvis-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fvis-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fvis-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anishmprasad","download_url":"https://codeload.github.com/anishmprasad/vis-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067953,"owners_count":21207415,"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","hammerjs","knowledge-graph","network-graph","react","reactjs","visjs"],"created_at":"2024-11-08T15:12:28.671Z","updated_at":"2025-04-19T16:39:11.320Z","avatar_url":"https://github.com/anishmprasad.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# vis-react\n\nA React component to display beautiful network graphs using vis.js\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\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### Installation\n\n```\n// with npm\n$ npm install vis-react --save\n\n// with yarn\n$ yarn add vis-react\n```\n\n## Load\n\nTo use a component, include the javascript and css files of vis in your root html:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js\"\u003e\u003c/script\u003e\n\t\t\u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cscript type=\"text/javascript\"\u003e\n\t\t\t// ... load a visualization\n\t\t\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\nor load vis.js using require.js. Note that vis.css must be loaded too.\n\n# Usage\n\n```javascript\nimport Graph from 'vis-react';\n\nvar graph = {\n\tnodes: [\n\t\t{ id: 1, label: 'Node 1' },\n\t\t{ id: 2, label: 'Node 2' },\n\t\t{ id: 3, label: 'Node 3' },\n\t\t{ id: 4, label: 'Node 4' },\n\t\t{ id: 5, label: 'Node 5' }\n\t],\n\tedges: [\n\t\t{ from: 1, to: 2 },\n\t\t{ from: 1, to: 3 },\n\t\t{ from: 2, to: 4 },\n\t\t{ from: 2, to: 5 }\n\t]\n};\n\nvar options = {\n\tlayout: {\n\t\thierarchical: true\n\t},\n\tedges: {\n\t\tcolor: '#000000'\n\t},\n\tinteraction: { hoverEdges: true }\n};\n\nvar events = {\n\tselect: function(event) {\n\t\tvar { nodes, edges } = event;\n\t}\n};\n\nReact.render(\n\t\u003cGraph\n\t\tgraph={graph}\n\t\toptions={options}\n\t\tevents={events}\n\t\tstyle={style}\n\t\tgetNetwork={this.getNetwork}\n\t\tgetEdges={this.getEdges}\n\t\tgetNodes={this.getNodes}\n\t\tvis={vis =\u003e (this.vis = vis)}\n\t/\u003e,\n\tdocument.body\n);\n```\n\nYes, it's really all you need to get started as you can see in this live and interactive demo:\n\n[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3vvy7xqo9m)\n\n### Props\n\n| Name       | Type     | Required | Description     |\n| ---------- | -------- | -------- | --------------- |\n| graph      | `object` | `true`   | Nodes and Edges |\n| options    | `object` | `true`   | Options         |\n| events     | `object` | `true`   | Events callback |\n| style      | `object` | `false`  | Custom styles   |\n| getNetwork | `func`   | `false`  | Network nodes   |\n| getNodes   | `func`   | `false`  | All nodes       |\n| vis        | `object` | `false`  | vis instance    |\n\n\u003c!-- ### Screenshot\n\n![Preview][screenshot]\n\n[screenshot]: https://raw.githubusercontent.com/anishmprasad/netslider/master/screenshot/Screenshot.png 'Preview screenshot' --\u003e\n\n### Demo\n\n-   [anish.m.prasad.com](https://anishmprasad.com/opensource/vis-react)\n-   [anishmprasad.github.io](https://anishmprasad.github.io/opensource/vis-react)\n-   [codesandbox.io](https://codesandbox.io/embed/3vvy7xqo9m)\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Fvis-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanishmprasad%2Fvis-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Fvis-react/lists"}