ne-treeview
Component to display an object tree structure of the form:
const rootObject = {
label: 'parent',
items: [
{
label: 'child-1'
},
{
label: 'child-2'
}]
};
All the nodes are expanded by default. The html generated is based on ul>li tags.
Demo
To see a demo of the component in action goto the demo
Usage
npm install --save ne-treeview
In your javascript
import React from 'react';
import ReactDOM from 'react-dom';
import TreeView from 'ne-treeview';
const root = {
label: 'parent',
items: [
{
label: 'child-1'
},
{
label: 'child-2'
}]
};
ReactDOM.render(
<div style={{width: 600, margin: '0 auto'}}>
<TreeView root={root} />
</div>,
document.getElementById('root')
);
API
<TreeView root={rootObject} style={inlineStylesObj}/>
Styling
The styles contained in ne-treeview.css must be loaded globally via a link tag, also the bootstrap 3 stylesheet must be present
<link rel="stylesheet" type="text/css" href="/your-styles/ne-treeview.css">
Build
To build the commonjs and es6 versions run:
npm run build
Testing
To run the tests
npm test
Linting
To run the lint command
npm run lint
Running the example
cd examples
node server.js
Implementation details
The implementation contains one public stateful component TreeView that acts as the API. Internally has a stateless component that recursively renders itself to render the complete tree. TreeView has the expanded/collapsed state for the nodes so it can remember the state of each node even after the parent node has been collapsed.