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

Prop Name	Structure	Description
data	Object	The data to be used in rendering the tree component. View it's structure below
onNodeClick()	(nodeId:string, nodeVal:any, isLeafNode:boolean) => void	Callback function to be invoked each time a node is clicked. Receives as arguments the id and value of the data for the node clicked. The isLeafNode is true if, well, the node clicked is a leaf node.
onNodeRightClick()	(nodeId:string, nodeVal:any, isLeafNode:boolean) => void	Callback function to be invoked each time a node is right-clicked. Receives as arguments the id and value of the data for the node clicked.
parentIcon	React.Element	Custom icon to used for parent nodes. It Should be a react component.
leafIcon	React.Element	Custom icon to used for leaf nodes. It Should be a react component.
style	React.CSSProperties	Styles to apply on the react-treeview container component.
parentStyle	React.CSSProperties	Custom styles to apply on the parent node.
leafStyle	React.CSSProperties	Custom styles to apply on the leaf node.
nodeStyle	React.CSSProperties	Custom styles to apply on a node (parent or leaf). Note: nodeStyle is merged with the parentStyle for a parent node or leafStyle for a leaf node
renderParent()	(label:string) => React.ElementType	Returns a custom component to be used in rendering a parent node. The label for the current parent node to be rendered is passed as argument.
renderLeaf()	(label:string) => React.ElementType	Returns a custom component to be used in rendering a leaf node. The label for the current leaf node to be rendered is passed as argument.
renderNode()	(label:string) => React.ElementType	Returns a custom component to be used in rendering any node (leaf or parent). The label for the current node to be rendered is passed as argument. Note: renderParent and renderLeaf if specified will have a higher precedence over renderNode
transformLabel()	(label:string) => string	Takes as argument the label to be displayed for a node and returns the actual text that will be displayed.
disableHoverEffect	boolean	Disables the default highlighting of nodes when moused over.
activeNodeColor	boolean	The color used to highlight the active node (node currently selected). If set to null, The active node is never highlighted
autoDetectLeafNode	boolean	Automatically detects the leaf node (node with no children field), hence no need to explicitly specify the leaf property in the data.

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!