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'
}]
}]
Demos
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.
Loading
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( ... );
API Overview
API DocsTreeNode
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();