React-Treeview

React component library to render data into tree view.

Open in CodeSandbox

Features

• Customization of tree node and icon.
• Select / Unselect nodes.
• Disabled nodes.
• Performance

Getting started

npm install @neui/react-treeview

or

yarn add @neui/react-treeview

Prop types

| Prop name | Type | Default value | Description | | ------------------------ | ----------------- | ------------- | --------------------------------------------------------------- | | data | array[node] | required | Tree data | | treeNodeRenderer | func | noop | Render prop for the node (see below for more details) | | iconRenderer | func | noop | Render prop for the node (see below for more details) | | onClick | func | noop | Function called when a node is clicked | | onSelect | func | noop | Function called when a node is selected/deselected | | enableSelection | bool | false | Allows nodes to be selected | | showIcon | bool | false | Show icon for non-leaf and leaf node | | showLine | bool | false | Show line indicator to visualize depth of tree | | defaultSelectedKeys | array[node.key] | [] | Array with the ids of the default selected nodes | | defaultExpandedKeys | array[node.key] | [] | Array with the ids of the default expanded nodes | | defaultDisabledKeys | array[node.key] | [] | Array with the ids of the default disabled nodes |

data (tree-node)

| Property | Type | Default | Description | | ---------- | ------------- | -------- | ------------------------------------------------------------------------------------ | | name | string | required | Used to match on key press | | children | array[node] | undefined | An array with the children nodes. If absent then node will be treated as leaf node | | key | string | required | A string that uniquely identifies the node |

Example:

const data = [
  {
    label: "Folder 1",
    key: "1",
    children: [
      {
        label: "Folder 1.1",
        key: "1.1",
        children: [
          {
            label: "File 1.1.1",
            key: "1.1.1",
          },
          {
            label: "File 1.1.2",
            key: "1.1.2",
          },
          {
            label: "Folder 1.1.3",
            key: "1.1.3",
            children: [
              {
                label: "File 1.1.1.1",
                key: "1.1.1.1",
              },
            ],
          }
        ]
      },
      {
        label: "Folder 1.2",
        key: "1.2",
        children: [
          {
            label: "File 1.2.1",
            key: "1.2.1",
          },
          {
            label: "File 1.2.2",
            key: "1.2.2",
          }
        ]
      }
    ]
  }
];

onClick

onClick({ node, isSelected, isExpanded, isDisabled })

onSelect

onClick({ node, isSelected, isExpanded, isDisabled })

treeNodeRenderer & iconRenderer

| Property | Type | Description | | ---------------- | ------------ | ----------------------------------------------------------------------------------------------------- | | node | object | The object that represents the tree node | | isLeafNode | bool | Whether the rendered node is a tree leaf node | | isSelected | bool | Whether the rendered node is selected | | isExpanded | bool | Whether the rendered node is expanded | | isDisabled | bool | Whether the rendered node is disabled | | onClick | function | Function to assign to the onClick event handler of the element(s) that will toggle the expanded state | | onSelect | function | Function to assign to the onClick event handler of the element(s) that will toggle the selected state |