Home

Awesome

React Treeview with Material UI

A Treeview React Component that can use material-ui's styling.

react-treeview-mui Demo Gif

Installation

$ npm install --save react-treeview-mui
import import React, {Component, PropTypes} from 'react'
// With material-ui
// be sure to have <MuiTreeList /> inside <MuiThemeProvider />
import {MuiTreeList} from 'react-treeview-mui'
// Without material-ui styling
import {TreeList} from 'react-treeview-mui'

// UI state (e.g., expanded list items) is tracked locally
const listItems = [...,{title: 'List Item'},...]
class MyComponent extends Component {
	render() {
		<MuiTreeList
			listItems={listItems}
			contentKey={'title'} />
	}
}

// UI state is tracked outside of <MuiTreeList />
// Maybe through Redux
class MySecondComponent extends Component {
	render() {
		<MuiTreeList 
			listItems={listItems}
			contentKey={'title'}
			useFolderIcons={true}
			haveSearchbar={true}
			listItemIsEnabled={this.props.listItemIsEnabled}
			expandedListItems={this.props.expandedListItems}
			activeListItem={this.props.activeListItem}
			handleTouchTap={this.props.handleTouchTap}
			handleTouchTapInSearchMode={this.props.handleTouchTapInSearchMode}
			handleSearch={this.props.handleSearch}
			searchTerm={this.props.searchTerm} />
	}
}

Usage

Data for nodes

One of the required props for the Component is the data for the list items. Instead of an object data structure with child list items nested inside parent list items, the Component takes in an array of list item objects. To accomodate this structure, the objects have a few required keys as following:

const listItems = [
{
    // Each list item is tracked by its index in the master array
    depth: 0, // Used to style the list item. Items with 0 depth will not be rendered and act as the root parent
    children: [1, 3, 10] // Indexes for child list items. If undefined, list item will be treated as leaf
}   
...,
{
    depth: 1,
    children: [12,16],
    parentIndex: 0, // Index of parent list item
    disabled: false // false by default, disables click event listeners for disabled list items
},{
    depth: 2,
    children: [13,14,15],
    parentIndex: 11,
    disabled: false
},
...
]

Why use an Array?

First off, it's faster. But unless you're rendering hundreds and hundreds of list items, speed wouldn't be your concern.

Apart from that, it comes from personal preference. I found it to be easier to reason about how the Component should react to change in state. Specifically, I found that it aligned well with "the Redux-way" of thinking about state management with reducers.

Props

nametypedefaultdescription
listItems[Object]requiredAn array of list item objects.
contentKeyStringrequiredThe name of the key inside list item objects whose value should be used for the content in the rendered list items.
styleObjectundefinedJavaScript style object to overwrite preset styles.
expandedListItems[Integer]undefinedAn array of the index values of list items that should be expanded. If no value is given, the expansion of tree nodes will be tracked by state internal to the Component.
activeListItemIntegerundefinedIndex value of the active list item. If no value is given, it will be tracked by state internal to the Component.
haveSearchbarBooleanfalseIf true, a searchbar component will be added.
searchTermStringundefinedString value for search term. If no value is given, it will be tracked by state internal to the Component.
handleSearchFunctionundefinedThe default search function is very rudimentary. Insert a function to override the default behavior. Receives the search term (String) as first parameter.
handleTouchTapFunctionundefinedFunction that gets called when a If expandedListItems and activeListItem is tracked outside of the Component, this function must deal with those states as well. Receives the list item (Object) and the index value of that list item (Int) as parameters.
handleTouchTapInSearchModeFunctionundefinedReceives the search term (String) as first parameter.
listHeightIntegerundefinedOverwrites the height (in px) of list items
useFolderIconsBooleanundefinedOnly for MuiTreeList. If true, will use folder and file icons for list items.

Animation

The Component uses ReactCSSTransitionGroup to animate the items inside the treeview. It exposes the classes tree-list-enter and tree-list-leave to style.

example

.tree-list-enter {
	animation-name: tree-list-enter;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
  transform: translateZ(0);
}
.tree-list-leave {
	animation-name: tree-list-leave;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}
@keyframes tree-list-enter {
	0% {
		height: 0px;
		opacity: 0.01;
	}
	100% {
		height: 32px;
		opacity: 1;
	}
}
@keyframes tree-list-leave {
	0% {
		height: 32px;
		opacity: 1;
	}
	100% {
		height: 0px;
		opacity: 0.01;
	}
}