avin/react-vt-tree

Tree realisation based on `react-window` library

react-vt-tree

Super fast virtulized tree of your dreams!

Demo

Here is an examples page

Install

# Yarn
yarn add react-vt-tree

# NPM
npm install --save react-vt-tree

Features

• ⚡ Super mega fast! It’s based on super fast virtulized-lists library react-window

• 🎨 Super customizable! Any components, any classNames, any styles for ALL included elements!

• 🍔 Content structure INDEPENDENT! Write your personal selectors to get children and expanded statuses! You can use flat or structured data arrays or Immutable.js iterable constructions.

Usage

See source code of examples here

API

NodeParams properties

Property	Type	Description
node	any	Node data object
depth	number	Depth of node
hasChildren	boolean	Has children sign
isExpanded	boolean	Is expanded sign
index	number	Index of node
additionalData	Any	Additional data

<Tree /> properties

Property	Type	Required?	Description
width	Number	✓	Width of tree container.
height	Number	✓	Height of tree container.
nodes	Iterable object	✓	Tree node-items.
isNodeExpandedSelector	Function	✓	Selector to get expanded status of node item.
nodeChildrenSelector	Function	✓	Selector to get child-nodes.
hasChildrenSelector	Function		Selector to determine children presence. You can skip this selector, so the result of nodeChildrenSelector will be used, but some times it’s better to use if nodeChildrenSelector is slow to get more performance boost
nodeContentSelector	Function	✓	Node’s content selector.
firstLevelNodesSelector	Function	✓	Selector to get first level items (with no parents).
levelPadding	number		Padding-left of 1x depth level. Default: 22
noExpanderSpaceWidth	number		Blank space width when there is no expander. Default: 25
nodeClassName	string or Function		Node optional className string or generate function. Function arguments: (NodeParams)
nodeStyle	Object or Function		Node optional style object or generate function. Function arguments: (NodeParams)
nodeContentClassName	string or Function		Node content optional className string or generate function. Function arguments: (NodeParams)
nodeContentStyle	Object or Function		Node content optional style object or generate function. Function arguments: (NodeParams)
onNodeClick	Function		On node click handler. Function arguments: (NodeParams)
onNodeCollapse	Function		On node collapse handler. Function arguments: (NodeParams)
onNodeContextMenu	Function		On node context menu handler. Function arguments: (NodeParams)
onNodeDoubleClick	Function		On node double click handler. Function arguments: (NodeParams)
onNodeExpand	Function		On node expand handler. Function arguments: (NodeParams)
nodeExpanderComponent	Function		Node Expander component.
nodeContentComponent	Function		Node content component.
itemHeight	number		Height of tree row. Default: 25
onScroll	Function		On scroll tree list handler.
className	string		Optional class name tree-list.
style	Object		Optional CSS style object for tree-list.
initialScrollOffset	number		Scroll offset for initial tree list render.
listProps	Object		Any other react-window list props. See https://react-window.now.sh/#/api/FixedSizeList for more info.
additionalData	Any		Additional data for NodeParams;

Properties passing to nodeExpanderComponent

Property	Type	Required?	Description
…​ Includes all fields of NodeParams
onClick	Function		Expand/collapse handler
className	string		Expander default className

Properties passing to nodeContentComponent

Property	Type	Required?	Description
…​ Includes all fields of NodeParams
style	Object		Style object as a result of nodeContentStyle <Tree /> property
className	string		ClassName string as a result of nodeContentClassName <Tree /> property

License

MIT © avin