README
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.