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.