Needlessly Provoking Marsupials

    @cels/react-treeview
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    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!

    Install

    npm i @cels/react-treeview

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    18

    Last publish

    Collaborators

    • nkemcels