React Tree View Component
npm install storybook-react-treebeard
npm install react-treebeard --save
`
$3
An online example from the /example directory can be found here: Here
$3
`javascript
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import {Treebeard} from 'react-treebeard';
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 React.Component {
constructor(props){
super(props);
this.state = {};
this.onToggle = this.onToggle.bind(this);
}
onToggle(node, toggled){
if(this.state.cursor){this.state.cursor.active = false;}
node.active = true;
if(node.children){ node.toggled = toggled; }
this.setState({ cursor: node });
}
render(){
return (
data={data}
onToggle={this.onToggle}
/>
);
}
}
const content = document.getElementById('content');
ReactDOM.render( , content);
`
$3
#### data
PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired
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 example/data.js
#### onToggle
PropTypes.func
Callback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.
#### style
PropTypes.object
Sets the treeview styling. Defaults to src/themes/default.
#### animations
PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
Sets the treeview animations. Set to false if you want to turn off animations. See velocity-react for more details. Defaults to src/themes/animations.
#### decorators
PropTypes.object
Decorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to src/decorators. 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 node.activeLink` style object in the theme.