rbh connect tree

intro

a simple react component based on jsplumb for displaying tree-structure data.

install

npm install rbh-connect-tree

usage

Datasource

The datasource should be tree-structure containing two properties: data: any and children: any[]. for example:

const datasource = {
  data: 'layer1-1',
  children: [
    {
      data: 'layer2-1',
      children: [
        {
          data: 'layer3-1',
          children: []
        }
      ]
    },
    {
      data: 'layer2-2'
      children: []
    }
  ]
}

// ...
<ConnectTree dataSource={dataSource}/>

Option

TODO

Example

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ConnectTree, { randomGeneratesTree } from 'rbh-connect-tree';

const App = () => {
  const [dataSource, setDataSource] = React.useState(randomGeneratesTree(4, 100, 2));

  return (
    <div>
      <ConnectTree
        style={{ height: '100vh', width: '100vw'}}
        dataSource={dataSource}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));