Inspire Tree

A lean, clean, blazing fast javascript tree.

Create a new pure-API Tree with some data:

var tree = new InspireTree({
  data: [] // Array, callback, or promise
});

Use our Inferno-powered DOM rendering

new InspireTreeDOM(tree, {
    target: '.tree'
});

Nodes must include a text property.

[{ text: 'Features' }]

Children are nested:

[{
  text: 'Features',
  children: [{
    text: 'Robust API'
  }]
}]

Install

We offer two packages: InspireTree and InspireTreeDOM.

InspireTree is the core library and API. If you want api-only or to write custom rendering code, it's all you need.

InspireTreeDOM is the default DOM rendering engine, built on Inferno.

Using NPM:

npm install --save inspire-tree

npm install --save inspire-tree-dom

Using Yarn:

yarn add inspire-tree

yarn add inspire-tree-dom

Both libraries require Lodash. If you're not using a module bundler (like Webpack, Browserify, or rollup) you'll need to ensure Lodash is available.

The Old Fashioned Way:

<script src="inspire-tree.min.js"></script>
<script>
  new InspireTree( ... );
</script>

Using AMD for things like RequireJS:

<script>
  require(['inspireTree'], function(InspireTree) {
    new InspireTree( ... );
  })
</script>

Using CommonJS for things like Node, Webpack, Browserify:

var InspireTree = require('inspire-tree');

new InspireTree( ... );

Each incoming javascript object is wrapped as a TreeNode, which provides all single-node methods.

tree.node('a-unique-id').select();

TreeNodes is an Array-like object which holds multiple TreeNode objects.

We map several TreeNode methods so you can easily invoke them on all nodes in the collection, or recursively.

Expands selected nodes:

tree.selected().expand();

Expands selected nodes and their children:

tree.selected().expandDeep();