React TreeView component based on a great react-toolbox UI framework.
This package is currently under an active development and API might change in the future. The package is used in an active project so adding a new features and bug fixing is mainly driven by the input from the project.
- Configurable search behaviour
- Custom styling
- Improved animation
This package was developed as part of a couple of internal projects where react-toolbox is used as a main UI framework and we weren't able to find a suitable TreeView component for our needs.
Main focus is on
- Performance - Reconsolidate and update only nodes which really need to be.
- Maps - Taking an advantage of Map which defines tree structure.
- Material UI - This package is proudly based and dependent on react-toolbox.
- Interactive - Make the TreeView interactive and as flexible as possible.
- Only one node can be selected at the time. As soon as a new node is selected the current selection is deselected.
- TreeView is defined by nodes which must be given as input in form of Map which may not be supported by older browsers. See status here. You can use babel-polyfill or core-js with your application in order to support older browsers.
- The package will only work with react-toolbox-beta8 and higher
Searching functionality can be enabled via a search property. Searching is disabled by default due to its impact
on the performance as the whole tree must be searched and modified.
At the moment all the siblings (collapsed) along with matched node's parent structure (expanded) are displayed. This is behaviour is expected to become configurable in the future.
Initial selection can be defined by providing a key value of initially selected node via selectedNode property.
The parent structure of the initially selected node will be expanded.
The TreeView supports four different sizing options provided via size option which accepts following values
- xs
- sm
- md
- lg
This package can be embedded into your application requiring following peerDependencies
- React
- ReactDOM
- react-toolbox
You can get the component from NPM
npm install rt-treeview
UMD coming soon.
There are two components exposed by the package - TreeView and TreeViewDialog.
Similar to react-toolbox the components are written using React, PostCSS(http://postcss.org/) and CSSNext(http://cssnext.io/).
That means in order to use the components you should use package bundler (webpack) for your application
along with PostCSS - postcss-cssnext and postcss-nesting in particular.
import {TreeView} from 'rt-treeview'TreeView component can be embedded directly into your application. The tree is defined and constructed by nodes.
| name | type | isRequired | description |
|---|---|---|---|
| nodes | MapOf(Node) | yes | Map of nodes used to construct the tree. |
| selectedNode | string | no | Initially selected node on a first render |
| search | bool | no | Display search input |
| error | string | no | Error message displayed above the tree |
| onNodeSelect | func | no | Callback called on a node selection with (nodeKey, node) |
| onNodeDeselect | func | no | Callback called when a node is de-selected with (nodeKey, node) |
| size | string | no | xs, sm, md, lg. Defaults to sm. |
| onlyLeafsSelectable | bool | no | Makes only leaf nodes selectable and doesn't trigger onNodeSelect for non-leaf nodes. Defaults to false. |
| name | type | isRequired | description |
|---|---|---|---|
| name | string | yes | |
| parent | string | no | Key of parent node from the Map |
| children | array | no | Keys of children nodes from the Map |
import React from 'react';
import {TreeView} from 'rt-treeview';
class TreeViewExample extends React.Component {
constructor(props) {
super(props);
const nodeArray = [
['N1', {name: 'Node #1', children: ['N2', 'N3']}],
['N2', {name: 'Node #2', parent: 'N1'}],
['N3', {name: 'Node #3', parent: 'N1', children: ['N4']}],
['N4', {name: 'Node #4', parent: 'N3'}],
['N5', {name: 'Node #5', children: ['N6']}],
['N6', {name: 'Node #6', parent: 'N5'}]
];
this.nodes = new Map(nodeArray);
this.onNodeSelect = this.onNodeSelect.bind(this);
}
onNodeSelect(nodeKey, node) {
// Do Stuff
}
onNodeDeselect(nodeKey, node) {
// Do stuff
}
render() {
return (
<TreeView
nodes={this.nodes} // Map of nodes
search={true} // Search enabled/disabled
onNodeSelect={this.onNodeSelect} // Event called on node selection
/>
)
}
}import {TreeViewDialog} from 'rt-treeview'TreeViewDialog is embedded only as a read-only Input which triggers a dialog with the TreeView component. This is useful when you don't want to embed the TreeView directly into the main view and only display selected value as a regular input value.
Please note that setting the value of Input is not handled by the rt-treeview and must be taken care of by user ie. as shown in the example below.
| name | type | isRequired | description |
|---|---|---|---|
| inputLabel | string | no | Label for the Input component |
| inputValue | string | no | Value for the Input component |
| error | string | no | Error for the Input component |
| dialogTitle | string | no | Dialog title |
| children | element | yes | TreeView |
import React from 'react';
import {TreeView, TreeViewDialog} from 'rt-treeview';
class TreeViewDialogExample extends React.Component {
constructor(props) {
super(props);
const nodeArray = [
['N1', {name: 'Node #1', children: ['N2', 'N3']}]<
7B31
span class="pl-kos">,
['N2', {name: 'Node #2', parent: 'N1'}],
['N3', {name: 'Node #3', parent: 'N1', children: ['N4']}],
['N4', {name: 'Node #4', parent: 'N3'}],
['N5', {name: 'Node #5', children: ['N6']}],
['N6', {name: 'Node #6', parent: 'N5'}]
];
this.state = {
selectedKey : 'N1'
};
this.nodes = new Map(nodeArray);
this.onNodeSelect = this.onNodeSelect.bind(this);
}
onNodeSelect(nodeKey, node) {
this.setState({
selectedKey: nodeKey
});
}
render() {
const node = this.nodes.get(this.state.selectedKey);
return (
<TreeViewDialog
inputValue={node ? node.name : "Unknown"}
inputLabel="Selected Node"
dialogTitle="Select random node"
>
<TreeView
nodes={this.nodes}
search={true}
onNodeSelect={this.onNodeSelect}
/>
</TreeViewDialog>
)
}
}git clone https://github.com/razakj/rt-treeview.git
cd rt-treeview
npm install
npm run examples
You should be able to access the examples via web browser at http://localhost:9876. Please note that currently there is a bug with styles not loading properly in the provided examples.
The examples can be found under ./examples/index.js