react-infinite-tree
The infinite-tree library for React.
Demo: http://cheton.github.io/react-infinite-tree
Features
Browser Support
Chrome | Edge | Firefox | IE | Opera | Safari |
---|
Yes | Yes | Yes | 9+ | Yes | Yes |
Installation
npm install --save react react-dom infinite-tree
npm install --save react-infinite-tree
Example
import React from 'react';
import InfiniteTree from 'react-infinite-tree';
import 'react-infinite-tree/dist/react-infinite-tree.css';
const data = {
id: 'fruit',
name: 'Fruit',
children: [{
id: 'apple',
name: 'Apple'
}, {
id: 'banana',
name: 'Banana',
children: [{
id: 'cherry',
name: 'Cherry',
loadOnDemand: true
}]
}]
};
class App extends React.Component {
tree = null;
componentDidMount() {
this.tree.loadData(data);
this.tree.selectNode(this.tree.getChildNodes()[0]);
}
render() {
return (
<div>
<InfiniteTree
ref={(c) => this.tree = c.tree}
autoOpen={true}
loadNodes={(parentNode, done) => {
const suffix = parentNode.id.replace(/(\w)+/, '');
const nodes = [
{
id: 'node1' + suffix,
name: 'Node 1'
},
{
id: 'node2' + suffix,
name: 'Node 2'
}
];
setTimeout(() => {
done(null, nodes);
}, 1000);
}}
selectable={true}
shouldSelectNode={(node) => {
if (!node || (node === this.tree.getSelectedNode())) {
return false; // Prevent from deselecting the current node
}
return true;
}}
onOpenNode={(node) => {
console.log('open node:', node);
}}
onCloseNode={(node) => {
console.log('close node:', node);
}}
onSelectNode={(node) => {
console.log('select node:', node);
}}
onContentWillUpdate={() => {
}}
onContentDidUpdate={() => {
}}
/>
</div>
);
}
}
API Documentation
Check out API documentation at infinite-tree:
License
Copyright (c) 2016 Cheton Wu
Licensed under the MIT License.