React Tree View Component
npm install react-filetree-lite
React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
``
npm install react-filetree-lite --save
javascript
import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import {Treebeard} from 'react-filetree-lite';const data = {
name: 'root',
toggled: true,
children: [
{
name: 'parent',
children: [
{ name: 'child1' },
{ name: 'child2' }
]
},
{
name: 'loading parent',
loading: true,
children: []
},
{
name: 'parent',
children: [
{
name: 'nested parent',
children: [
{ name: 'nested child 1' },
{ name: 'nested child 2' }
]
}
]
}
]
};
class TreeExample extends PureComponent {
constructor(props){
super(props);
this.state = {data};
this.onToggle = this.onToggle.bind(this);
}
onToggle(node, toggled){
const {cursor, data} = this.state;
if (cursor) {
this.setState(() => ({cursor, active: false}));
}
node.active = true;
if (node.children) {
node.toggled = toggled;
}
this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
}
render(){
const {data} = this.state;
return (
onToggle={this.onToggle}
/>
);
}
}
const content = document.getElementById('content');
ReactDOM.render(
`If you use react-hooks you should do something like this:
javascript
import React, {useState} from 'react';
const TreeExample = () => {
const [data, setData] = useState(data);
const [cursor, setCursor] = useState(false);
const onToggle = (node, toggled) => {
if (cursor) {
cursor.active = false;
}
node.active = true;
if (node.children) {
node.toggled = toggled;
}
setCursor(node);
setData(Object.assign({}, data))
}
return (
)
}const content = document.getElementById('content');
ReactDOM.render(
`$3
#### data
Data that drives the tree view. State-driven effects can be built by manipulating the attributes in this object. Also supports an array for multiple nodes at the root level. An example can be found in
#### onToggle
Callback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.
#### style
Sets the treeview styling. Defaults to
.#### animations
PropTypes.oneOfType([PropTypes.object, PropTypes.bool])Sets the treeview animations. Set to
if you want to turn off animations. See velocity-react for more details. Defaults to src/themes/animations.#### decorators
PropTypes.objectDecorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to
. See example below:`javascript
const decorators = {
Loading: (props) => {
return (
loading...
);
},
Toggle: (props) => {
return (
);
},
Header: (props) => {
return (
{props.node.name}
);
},
Container: (props) => {
return (
// Hide Toggle When Terminal Here
);
}
};
`$3
javascript
{
id: '[optional] string',
name: 'string',
children: '[optional] array',
toggled: '[optional] boolean',
active: '[optional] boolean',
loading: '[optional] boolean',
decorators: '[optional] object',
animations: '[optional] object'
},
`
#### id
The component key. If not defined, an auto-generated index is used.#### name
The name prop passed into the Header component.
#### children
The children attached to the node. This value populates the subtree at the specific node. Each child is built from the same basic data structure. Tip: Make this an empty array, if you want to asynchronously load a potential parent.
#### toggled
Toggled flag. Sets the visibility of a node's children. It also sets the state for the toggle decorator.
#### active
Active flag. If active, the node will be highlighted. The highlight is derived from the
#### loading
Loading flag. It will populate the treeview with the loading component. Useful when asynchronously pulling the data into the treeview.
#### decorators / animations
Attach specific decorators / animations to a node. Provides the low level functionality to create visuals on a node-by-node basis. These structures are the same as the top level props, described above.