Inspire Tree

A lean, clean, blazing fast javascript tree.

You need only a dom element and a data source:

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

Listen for the load event and use the API:

tree.on('model.loaded', function() {
  tree.expand();
});

Nodes must include a text property.

[{ text: 'Features' }]

Children are nested:

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

Install

Using NPM:

npm install --save inspire-tree

Using Bower:

bower install --save inspire-tree

Direct Download

Files

We provide a variety of builds tailored to your needs.

"bundled" variants
Bundles core lodash code. This file has zero external dependencies.
"core" variants
Excludes DOM rendering logic, if you plan to use custom rendering.
"min" variants
Minified, production-ready files.
inspire-tree.js
Tree + DOM code, requires lodash.

We also provide production-ready CSS, and our source SCSS for those who wish to custom compile.

Loading

The Old Fashioned Way.

<script src="inspire-tree-bundled.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 Webpack, Browserify

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

new InspireTree( ... );

API Overview

API Docs

TreeNode

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

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

TreeNodes

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();