The project has very few dependencies, but you will need the following.
Npm:
$ npm install react-bootstrap4-treeInclude the correct styles, it's mainly just bootstrap but we add a few tweaks as well.
<!-- Required CSS -->
<link href="path/to/bootstrap.css" rel="stylesheet">OR
npm install bootstrapIn index.js:
import 'bootstrap/dist/css/bootstrap.css'Then, a basic initialization would look like.
React.render(
<TreeView data={data} />,
document.getElementById('treeview')
);In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects. You can define your custom data in the tree data.
Example
let data = [
{
text: 'a1',
customData: {
id: '1'
},
nodes: [
{
text: 'a1-a1',
customData: {
id: '2'
},
nodes: []
}
]
},
{
text: 'a2',
customData: {
id: '3'
},
nodes: [
{
text: 'a2-a1',
customData: {
id: '4'
},
nodes: [
{
text: 'a2-a1-a1'
},
{
text: 'a2-a1-a2'
}
]
}
]
},
{
text: 'a3',
customData: {
id: '7',
other: 'other'
},
nodes: [
{
text: 'a3-a1',
customData: {
id: '9',
another: 'another'
},
nodes: [
{
text: 'a2-a1-a1',
nodes: [
{
text: 'a2-a1-a1'
},
{
text: 'a2-a1-a2'
}
]
},
{
text: 'a2-a1-a2'
}
]
},
{
text: 'a3-a2'
}
]
},
];If you want to do more, here's the full node specification
{
text: "Text 1",
color: "#000000",
backgroundColor: "#FFFFFF",
showBorder: true,
showSelect: true,
state: {
expanded: true,
selected: true
},
customData: {
},
nodes: [
{},
...
]
}The following properties are defined to allow node level overrides, such as node specific colors and border.
String Mandatory
The text value displayed for a given tree node.
String Optional
The foreground color used on a given node, overrides global color option.
String Optional
The background color used on a given node, overrides global color option.
Object Optional
Describes a node's initial state.
Boolean Default: false
Whether or not a node is expanded i.e. open. Takes precedence over global option levels.
Boolean Default: false
Whether or not a node is selected.
Options allow you to customise the treeview's default appearance and behaviour. They are passed to the react component as properties on initialization.
// Example: initializing the treeview
// with a background color of green
// with onExpand and onSelect function
let onExpand = function(nodeData, treeData) {
console.log(nodeData);
console.log(treeData);
}
let onSelect = function(nodeData, treeData) {
console.log(nodeData);
console.log(treeData);
}
React.render(
<TreeView data={data} backgroundColor="green" onExpand={onExpand} onSelect={onSelect} />,
document.getElementById('treeview')
);The following is a list of all available options.
Array of Objects. No default, expects data
This is the core data to be displayed by the tree view.
String, any legal color value. Default: inherits from Bootstrap.css.
Sets the default foreground color used by all nodes, except when overridden on a per node basis in data.
String, any legal color value. Default: inherits from Bootstrap.css.
Sets the default background color used by all nodes, except when overridden on a per node basis in data.
Boolean. Default: true
Whether or not to display a border around nodes.
Boolean. Default: true
Whether or not to display a select icon.
Function. Default: Undefined
When the tree node expand or collapse, this function will be call. It will pass the current node data and the whole tree data as parameter.
Function. Default: Undefined
When the tree node is selected or unselected, this function will be call. It will pass the current node data and the whole tree data as parameter.