a simple react component based on jsplumb for displaying tree-structure data.
npm install rbh-connect-tree
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}/>
TODO
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'));