React-TreeView

A data-driven, customizable, fast, lightweight and efficient tree view component built with and for ReactJs.

installation

Yarn

yarn add @cels/react-treeview

Npm

npm install @cels/react-treeview

Usage

import ReactTreeView from "@cels/react-treeview";

Do not forget to import the css file into your project.

import "@cels/react-treeview/dist/styles.css";

Example:

import React from React;
import ReactTreeView from "@cels/react-treeview";

const  dummyData  = {
    label:  'root',
    value:  "root/",
    children: [
        {
            label:  'parent',
            value:  "root/parent/",
            children: [
                { label:  'child1', value:"root/parent/child1", leaf:true },
                { label:  'child2', value:"root/parent/child2", leaf:true }
            ]
        },
        {
            label:  'parent2',
            value:"root/parent2/"
        }
    ]
};

class App extends React.Component{
    state = { data: dummyData }
    handleNodeClicked = (nodeId, nodeValue){
        // Do something with the `value` data for the node clicked.
    }
    render(){
        return (
            <ReactTreeView
                data={this.state.data} 
                onNodeItemClicked={this.handleNodeClicked} />
        )
    }
}

Available Props

Structure of the data

{
  id: "string [optional]",
  label: "string",     
  value: "any [optional]",
  leaf: "boolean [optional]"
  active: "boolean [optional]", 
  toggled: "boolean [optional]",
  children: "array [optional]"
}

id: A string which identifies the node. label: The string to be displayed as a label for the node value: The value to be sent to the callback listener when the node is clicked leaf: A boolean which identifies if the current node is a leaf node. active: If set to true, the node will be highlighted as the current active node. toggled: If set to true, and is a parent node, it will be expanded on the tree-view children: An array of objects where the structure of an object is as explained above (id, label, value... ).

Licence

MIT Licensed. Copyright (c) Nkemtakeh Celsoppe 2019.

Have a great day!