react-treeviewer

React Treeview

Customizable Treeviewer built in react for visualizing hierarchical data.

Installing

npm install --save react-treeviewer

The fontawesome css file is not included so include it in your webpage:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

Another tree viewer?

There are already multiple solutions out the for viewing hierarchical data but I found all existing libraries to be lacking in some manner. I wanted to be able to customize more than I could with the existing solutions.

Features

• Customize expand and collapse icons
• Add custom icons to each node
• Expand nodes by clicking text if selectable is not true.
• Draggable nodes.
• Double Click a node to expand or collapse all the children
• Test suite with 100% coverage

Coming soon

• Lazy loading node's children
• Live Examples

Basic Usage

import TreeView from  'react-treeviewer';
render: () {
    <TreeView
        data={data}
    />


}

TreeView Properties

animation

boolean

Turn animations on/off when expanding or collapsing a node.

--

selectable

boolean

Can nodes be selected? ( Selected nodes get the className: ad-selected-node )

--

onSelect(event, nodeData)

function

Callback executed when a node is selected

--

draggable

boolean

Can nodes be dragged?

--

onDrag(event, nodeData), onDragStart(event, nodeData), onDragEnd(event, nodeData)

functions

Callback functions associated with dragging a node.

--

onExpand(event, nodeData)

function

Callback function executed when a node is expanded.

--

onCollapse(event, nodeData)

function

Callback function executed when a node is collapsed.

onExpandAll(event, nodeData)

function

Callback function executed when all nodes are expanded or collapsed.

--

checkable

boolean

Adds checkboxes to each node.

--

onCheck(event, nodeData)

function

Callback executed when a node is checked

--

collapsedIcon

string

Fontawesome icon string to represent the collapsed node anchor

--

expandededIcon

string

Fontawesome icon string to represent the expanded node anchor

--

Data format

[{
    id:1,
    text:"Root",
    icon:"folder",
    expanded:false,
    children:[{
        id:3,
        selected: true,
        checked: false,
        text:"Child 1",
        iconObj: {
            name: 'rocket',
            size: '2x',
            spin: true,
            style: { color: 'red' }
        },
        children:[{id:5, text:"Grandchild 1"}]
        }
    ]
}]

Optional data properties

Add properties to each data node for more fine grained control.

icon

string

Fontawesome icon name.

--

iconObj

object

All properties in this object will be passed down to the icon. (This overrides the icon string property if present.)

expanded

boolean

Is the node expanded?

--

selected

boolean

Is the node selected?

--

checked

boolean

Is the node checked?

Something Missing?

If you have ideas for more “How To” recipes that should be on this page, or any additional features you would like let me know or contribute some! "# react-treeview-ad"