# react-graph-vis

> A react component to render nice graphs using vis.js

Latest version **1.0.7** (published 2021-02-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-graph-vis
pnpm add react-graph-vis
yarn add react-graph-vis
bun add react-graph-vis
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-02-15 |
| First published | 2015-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 772.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 992 |
| Author | Vincent Lecrubier |
| Maintainers | crubier |
| Keywords | react-component, react, graph, network, jsx |

## Links

- npm: https://www.npmjs.com/package/react-graph-vis
- Repository: https://github.com/crubier/react-graph-vis
- Homepage: https://github.com/crubier/react-graph-vis#readme
- Issues: https://github.com/crubier/react-graph-vis/issues
- npm.io page: https://npm.io/package/react-graph-vis

## Dependencies (5)

- [uuid](https://npm.io/package/uuid.md) ^2.0.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [vis-data](https://npm.io/package/vis-data.md) ^7.1.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [vis-network](https://npm.io/package/vis-network.md) ^9.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2021-02-15
- 1.0.6 — 2021-02-15
- 1.0.5 — 2019-10-08
- 1.0.4 — 2019-10-08
- 1.0.3 — 2019-10-08
- 1.0.2 — 2017-10-13
- 1.0.1 — 2017-09-25
- 1.0.0 — 2017-09-25
- 0.1.4 — 2017-09-25
- 0.1.3 — 2017-08-11
- 0.1.2 — 2017-05-31
- 0.1.1 — 2017-03-11
- 0.1.0 — 2017-02-01
- 0.0.5 — 2017-01-20
- 0.0.4 — 2016-12-28
- … 3 more at https://npm.io/package/react-graph-vis/versions

## README

# React graph vis

A React component to display beautiful network graphs using vis.js

Show, don't tell: [Demo](http://crubier.github.io/react-graph-vis/)

Make sure to visit [visjs.org](http://visjs.org) for more info.

Rendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.

![A graph rendered by vis js](example.png)

Due 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!

This component takes three vis.js configuration objects as properties:  

- graph: contains two arrays { edges, nodes }
- options: normal vis.js options as described [here](http://visjs.org/docs/network/#options)
- events: an object that has [event name](http://visjs.org/docs/network/#Events) as keys and their callback as values

# Usage

```javascript
import React from "react";
import ReactDOM from "react-dom";
import Graph from "react-graph-vis";

import "./styles.css";
// need to import the vis network css in order to show tooltip
import "./network.css";

function App() {
  const graph = {
    nodes: [
      { id: 1, label: "Node 1", title: "node 1 tootip text" },
      { id: 2, label: "Node 2", title: "node 2 tootip text" },
      { id: 3, label: "Node 3", title: "node 3 tootip text" },
      { id: 4, label: "Node 4", title: "node 4 tootip text" },
      { id: 5, label: "Node 5", title: "node 5 tootip text" }
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 }
    ]
  };

  const options = {
    layout: {
      hierarchical: true
    },
    edges: {
      color: "#000000"
    },
    height: "500px"
  };

  const events = {
    select: function(event) {
      var { nodes, edges } = event;
    }
  };
  return (
    <Graph
      graph={graph}
      options={options}
      events={events}
      getNetwork={network => {
        //  if you want access to vis.js network api you can set the state in a parent component using this property
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```











You can also check out the demo in the [`example`](https://github.com/crubier/react-graph-vis/tree/master/example) folder.

---
_Source: https://npm.io/package/react-graph-vis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._