react-vis-hooks v0.1.0

React vis.js hooks

React Vis.js wrapper

Demo

LINK

Installation

npm i -s react-vis-hooks

Peer dependencies

This package expect the following peer dependencies:

  "react": "^16.8.1"
  "react-dom": "^16.8.1"

Usage

First you have to wrap your app with the Provider giving it the alert template and optionally some options:

import * as React from "react";
import VisProvider, { VisGraph } from "react-vis-hooks";

const basic = () => {
  const data = {
    nodes: [
      { id: 1, label: "Node 1" },
      { id: 2, label: "Node 2" },
      { id: 3, label: "Node 3" },
      { id: 4, label: "Node 4" },
      { id: 5, label: "Node 5" }
    ],
    edges: [
      { from: 1, to: 3 },
      { from: 1, to: 2 },
      { from: 2, to: 4 },
      { from: 2, to: 5 },
      { from: 3, to: 3 }
    ]
  };

  return (
    <VisProvider graph={data}>
      <VisGraph />
    </VisProvider>
  );
};

You have also access to all of propertis from vis.js!

import React from "react";
import VisProvider from "react-vis-hooks";
import Graph from "./Graph";

const basic = () => {
  const data = {
    nodes: [
      { id: 1, label: "Node 1" },
      { id: 2, label: "Node 2" },
      { id: 3, label: "Node 3" },
      { id: 4, label: "Node 4" },
      { id: 5, label: "Node 5" }
    ],
    edges: [
      { from: 1, to: 3 },
      { from: 1, to: 2 },
      { from: 2, to: 4 },
      { from: 2, to: 5 },
      { from: 3, to: 3 }
    ]
  };

  return (
    <VisProvider graph={data}>
      <Graph />
    </VisProvider>
  );
};

Then import the useVis hook to be able to use vis.js properties:

// Graph.js
import React from 'react'
import { VisGraph, useVis } from "react-vis-hooks";

const Graph = () => {
  const { edges, nodes, network } = useVis(); // we can use all of vis.js operations

  return (
    <VisGraph />
  )
}

export default Graph

Options

You can pass the following options as props to Provider:

type Props = {
  graph: {
    edges: Edge[]; // https://visjs.github.io/vis-network/docs/network/edges.html#
    nodes: Node[]; // https://visjs.github.io/vis-network/docs/network/nodes.html#
  };
  options?: Options; // https://visjs.github.io/vis-network/docs/network/#options
};

Built With

• vis.js - A dynamic, browser based visualization library.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versionion: 1.0.0

Authors

• Michał Mrotek - Initial work

License

This project is licensed under the MIT License - see the LICENSE.md file for details