React Tree View for Twitter Bootstrap
npm install react-bootstrap-treeviewjavascript
$ npm install react-bootstrap-treeview
`
Bower:
`javascript
$ bower install react-bootstrap-treeview
`
Manual:
> Old fashion, downloadable files can be found here
$3
Include the correct styles, it's mainly just bootstrap but we add a few tweaks as well.
`html
`
Add required libraries.
`html
`
Then, a basic initialization would look like.
`javascript
React.render(
,
document.getElementById('treeview')
);
`
$3
Putting it all together a minimal implementation might look like this.
`html
React + Bootstrap Tree View
React + Bootstrap Tree View
`
Data Structure
In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.
Example
`javascript
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
`
At the lowest level a tree node is a represented as a simple JavaScript object. This one required property text will build you a tree.
`javascript
{
text: "Node 1"
}
`
If you want to do more, here's the full node specification
`javascript
{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
state: {
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
`
$3
The following properties are defined to allow node level overrides, such as node specific icons, colours and tags.
#### text
String Mandatory
The text value displayed for a given tree node, typically to the right of the nodes icon.
#### icon
String Optional
The icon displayed on a given node, typically to the left of the text.
For simplicity we directly leverage Bootstraps Glyphicons support and as such you should provide both the base class and individual icon class separated by a space.
By providing the base class you retain full control over the icons used. If you want to use your own then just add your class to this icon field.
#### color
String Optional
The foreground color used on a given node, overrides global color option.
#### backColor
String Optional
The background color used on a given node, overrides global color option.
#### href
String Optional
Used in conjunction with global enableLinks option to specify anchor tag URL on a given node.
#### state
Object Optional
Describes a node's initial state.
#### state.expanded
Boolean Default: false
Whether or not a node is expanded i.e. open. Takes precedence over global option levels.
#### state.selected
Boolean Default: false
Whether or not a node is selected.
#### tags
Array of Strings Optional
Used in conjunction with global showTags option to add additional information to the right of each node; using Bootstrap Badges
Options
Options allow you to customise the treeview's default appearance and behaviour. They are passed to the react component as properties on initialization.
`javascript
// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
React.render(
levels={5}
backColor={"green"} />,
document.getElementById('treeview')
);
``