Creating a tree view using React.js

5:30 PM Ricardo Memoria 5 Comments

This article is a tutorial about how to create an extendable tree view component using the awesome React.js framework.

The idea

It’s been quite common in projects I've been working with to display information in a tree view, and dealing with that in an HTML page and pure javascript is always painful. So I decided to create a tree view component using React.js that I could easily customize it, from a simple tree to a tree view table, with not much work.

For the impatient:

Dependencies

In this example, my tree view will have the following dependencies:

The component

I want the tree view to expose the minimum and most meaningful set of properties to the parent component. Ideally, the parent component should not deal with implementation details of a tree, like controlling the collapsing and expanding of nodes. So my TreeView component will expose the following properties:

  • getNodesData = function(parent) - Called every time the TreeView must retrieve the children of a parent node. It will return an array of data. The data returned has no relation with the TreeView but just to serve as a reference when communicating with the parent component. For example, when expanding an specific node, the data retrieved before is passed as a parameter representing the node. For asynchronous operation, the function may return a promise.
  • checkLeaf = function(data) - Optional - Just to check if the given data returned from getNodesData() represents a leaf (returning true) or if the node representing the data has children to display (returning false);
  • innerRender = function(data) - Must return a react component or a string as the label that will be displayed beside the node;
  • outerRender = function(comp, data) - Optional - Allows the parent to wrap the node inside another react component. It will allow to create complex compositions, like columns.

Internally, the TreeView will store a tree model in its state. This tree will be initialized with the root nodes, and as children are loaded, the tree model is updated.

Declaring the component

Let's create a new file called tree-view.jsx and declare the TreeView class

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

// load css styles
import './tree-view.less';

export default class TreeView extends React.Component {
render() {
 // get the root nodes
 const root = this.state ? this.state.root : null;

 // roots were not retrieved ?
 if (!root) {
  const self = this;
  this.loadNodes(null)
   .then(res => self.setState({ root: res }));
  return null;
 }

 return <div className="tree-view">{this.createNodesView(root)}</div>;
}
}

I see it as a good practice to declare one class per file, so the TreeView class is declared as exported and default.
The render function is quite straightforward - It simply checks if the root nodes are available, load them if not, and delegate the rendering to the function createNodesView.

Retrieving the tree nodes

Before rendering the tree, the TreeView must have at least the root nodes. Nodes are created based on an array returned from the parent component. The content of the array is not relevant to the TreeView. The elements will be used to create nodes and make reference to them when communicating with the parent component. So, whenever the TreeView needs to retrieve the children of a node, it will call the function loadNodes:

loadNodes(parent) {
 const func = this.props.onGetNodes;

 if (!func) {
   return null;
 }

 const pitem = parent ? parent.item : undefined;
 let res = func(pitem);

 // is not a promise ?
 if (!res || !res.then) {
  // force node resolution by promises
  res = Promise.resolve(res);
 }

 // create nodes wrapper when nodes are resolved
 const self = this;
 return res.then(items => {
  if (!items) {
   return [];
  }

  const nodes = self.createNodes(items);
  return nodes;
 });
}
  • Line 9 asks the parent component to send the array of children data relative to the parent node. The first call will ask for data of the root node, so parent will be null. Subsequent calls will inform the node data as the parent.
  • Line 12 checks if the result from onGetNodes is a promise. If not, embed it into a promise.
  • Line 19 waits for the promise to resolve. Once it is resolved, it will contain the array of nodes data.
  • Line 24 creates the node objects from the data returned of the parent component.

Node objects will store the state of the node, like if it is a leaf or not, and if it is collapsed or expanded. The implementation of the createNodes function is:

createNodes(items) {
 const funcInfo = this.props.checkLeaf;
 return items.map(item => {
  const leaf = funcInfo ? funcInfo(item) : false;
  return { item: item, state: 'collapsed', children: null, leaf: leaf };
 });
}
  • Line 4 asks the parent component if the data representing the node is a leaf or a node with other children. Notice that the initial state of the node is 'collapsed', but the node may have the states 'expanding' and 'expanded';
  • Line 5 creates the object that will store information about the node;

This function will return an array of node objects used internally by the TreeView.

Displaying the tree

Displaying the tree is nothing but creating the components that will be rendered based on the node tree model stored in the component state. In order to display the tree, the TreeView component will travesse all visible nodes and create react components from them. This is done by the createNodesView() function, called from the render() function:

createNodesView() {
 const self = this;
 
 // recursive function to create the expanded tree in a list
 const mountList = function(nlist, level, parentkey) {
  let count = 0;
  const lst = [];
 
  nlist.forEach(node => {
   const key = (parentkey ? parentkey + '.' : '') + count;
   const row = self.createNodeRow(node, level, key);
 
   lst.push(row);
   if (node.state !== 'collapsed' && !node.leaf && node.children) {
    lst.push(mountList(node.children, level + 1, key));
   }
   count++;
  });
 
  // the children div key
  const divkey = (parentkey ? parentkey : '') + 'ch';
 
  // children are inside a ReactCSSTransitionGroup, in order to animate collapsing/expanding events
  return (
   <ReactCSSTransitionGroup key={divkey + 'trans'} transitionName="node"
    transitionLeaveTimeout={250} transitionEnterTimeout={250} >
    {lst}
   </ReactCSSTransitionGroup>
   );
 };
 
 return mountList(this.state.root, 0, false);
}
  • Line 5 declares an internal function that will recursively travesse the node tree. It will receive the node list, the level of the list in the tree and the parent key used as the key of the react component;
  • Line 10 creates the key based on the parent key and the index of the node in the list;
  • Line 11 creates the react component, by invoking the createNodeRow function;
  • Line 14 checks if the node in the loop is expanded and contains child nodes. If so, call the function recursively;
  • Line 25 is used a react add-on to give animation to the node when it is collapsed or expanded;
  • Line 32 Is where the function is called, returning the list of components to be displayed

In fact, each react component of a node is created by the createNodeRow function, that takes the node object, the level in the tree and node key as parameter:

createNodeRow(node, level, key) {
   const p = this.props;
 
    // get the node inner content
    const content = p.innerRender ? p.innerRender(node.item) : node.item;
 
    // get the icon to be displayed
    const icon = this.resolveIcon(node);
 
    const waitIcon = node.state === 'expanding' ?
  <div className="fa fa-refresh fa-fw fa-spin" /> : null;
    // the content
    const nodeIcon = node.leaf ?
        icon :
        <a className="node-link" onClick={this.nodeClick} data-item={key}>
            {icon}
        </a>;
 
    const nodeRow = (
        <div key={key} className="node" style={{ marginLeft: (level * 16) + 'px' }}>
            {nodeIcon}
            {content}
        </div>
        );
 
    // check if wrap the component inside another one
    // provided by the parent component
    return p.outerRender ? p.outerRender(nodeRow, node.item) : nodeRow;
}
  • Line 5 gets the content that will be displayed beside the node collapse/expand button;
  • Line 8 gets the icon to be displayed as the collapse/expand button, by invoking resolveIcon;
  • Line 11 checks if the node is being expanded. If so, it will include an animated icon spinning while the node is loaded.
  • Line 13 generates the control to display the collapse/expand button. If it is not a leaf, the control will be an anchor, so the user will be able to collapse or expand the node.
  • Line 19 creates the node row, wrapping button and content inside a single div.
  • Line 28 if the parent component provided the property outerRender, it will be called to wrap the node row inside another component.

And this is the implementation of the function that will return the icon to display according to the node state:

resolveIcon(node) {
    let icon;
    if (node.leaf) {
        icon = 'circle-thin';
    }
    else {
        icon = node.state !== 'collapsed' ? 'minus-square-o' : 'plus-square-o';
    }
 
 
    var className = 'fa fa-' + icon + ' fa-fw';
    return <i className={className} />;
}

It uses Font Awesome to display the icon in the node tree.

Adding animation to the collapsing/expanding event

If you notice, when clicking on the plus or minus button, the tree is not collapsed or expanded immediately, but there is a quick animation that slides the children up or down smoothly. This effect is achieved with the animation features of CSS3 and the React add-on animation. One of the coolest features of Webpack is that you can embed CSS styles per javascript module. This is done by including it in the import section:

import from 'tree-view.less'

And the TreeView css style is

.tree-view {
 .title {
  font-weight: bold;
 }
 
 .node-link {
  cursor: pointer;
 }
}
 
.node-enter, .node-leave {
 display: block;
 overflow: hidden;
}
 
.node-enter {
 max-height: 0;
}
 
.node-enter.node-enter-active {
 max-height: 500px;
 transition: max-height 250ms ease-in;
}
 
.node-leave {
 max-height: 500px;
}
 
.node-leave.node-leave-active {
 max-height: 0px;
 transition: max-height 250ms ease-out;
}
 
.node-row {
 border-top: 1px solid #f0f0f0;
}

Actually it is not CSS, but Less, which gives a lot of extra features to create your CSS styles. Behind the scenes, Webpack transform this less file in css and embed it in the TreeView code. In order to give that smooth animation of nodes collapsing and expanding, these CSS elements are automatically included and removed by the react add-on animation module, which is applied in the function createNodesView:

createNodesView() {
  ..
  ..
  ..
 
  return (
   <ReactCSSTransitionGroup key={divkey + 'trans'} transitionName="node"
    transitionLeaveTimeout={250} transitionEnterTimeout={250} >
    {lst}
   </ReactCSSTransitionGroup>
   );

Conclusion

The TreeView is a basic component, but it can be easily customized and modified. In the source code at the top of this page, I made a lot of small improvements in the TreeView, like the possibility to change the icons being displayed and a property to display a header title at the top of the tree. Modify it as you wish. Have fun...

The original link for this post is here

5 comments:

  1. The content is good and very informative and I personally thank you for sharing reactjs articles with us.
    Hire Node.JS Developer

    ReplyDelete
  2. Thank you for sharing the amazing words and writing for the React JS. Could you please share me details, if I am going to hire any developer, it could be helpful ? I have some ReactJS Development Company, you can check by click! Please share me your views if I am right!!

    ReplyDelete
    Replies
    1. If you want to interview someone and want to know about his ReactJS knowledges, probably the best way is to check if he knows about the fundamental aspects of the framework, like difference between props and states, the component lifecycle, and how he would solve real scenarios. For example, React is just about view, so the developer must give a solution for the model and controller portion of the app. Hope I had helped!

      Delete
  3. React is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and it has strong foundation and large community behind it.

    AngularJS

    ReplyDelete