Skip to content

Latest commit

 

History

History
185 lines (174 loc) · 5.86 KB

README.md

File metadata and controls

185 lines (174 loc) · 5.86 KB

React-TreeView

Imgur
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!