@neui/react-treeview NPM

React-Treeview

Features

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

Getting started

npm install @neui/react-treeview

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
`defaultSelectedIds`	`array[node.key]`	`[]`	Array with the ids of the default selected nodes
`defaultSelectedIds`	`array[node.key]`	`[]`	Array with the ids of the default expanded nodes
`defaultSelectedIds`	`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",
          }
        ]
      }
    ]
  }
];

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
`handleSelect`	`function`	Function to assign to the onClick event handler of the element(s) that will toggle the selected state
`handleExpand`	`function`	Function to assign to the onClick event handler of the element(s) that will toggle the expanded state

onClick

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

onSelect

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

react react treeview treeview react tree react tree component

0.0.3

9 months ago

0.0.2

9 months ago