rc-tree vs react-treebeard vs react-checkbox-tree vs react-sortable-tree

Package	Downloads	Stars	Size	Issues	Publish	License

rc-tree	2,434,842	1,264	359 kB	166	10 months ago	MIT
react-treebeard	111,392	1,690	-	72	6 years ago	MIT
react-checkbox-tree	106,684	727	233 kB	88	-	MIT
react-sortable-tree	60,256	4,977	-	347	5 years ago	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

rc-tree

2,434,842

1,264

359 kB

166

10 months ago

MIT

react-treebeard

111,392

1,690

6 years ago

MIT

react-checkbox-tree

106,684

727

233 kB

MIT

react-sortable-tree

60,256

4,977

347

5 years ago

MIT

Customization

rc-tree:
rc-tree offers extensive customization options, allowing developers to define their own node rendering, styles, and behaviors. This flexibility makes it suitable for complex applications that require tailored tree structures.
react-treebeard:
react-treebeard is designed for simplicity and ease of use, offering basic customization options for node rendering. It is less flexible than rc-tree but is quick to implement for straightforward tree structures.
react-checkbox-tree:
react-checkbox-tree provides limited customization primarily focused on checkbox functionality. While you can style the tree, the core behavior is centered around selection, making it less flexible than rc-tree.
react-sortable-tree:
react-sortable-tree allows for customization of node rendering and drag-and-drop behavior, but it is primarily designed for reordering items. Customization is available but may require more effort compared to rc-tree.

User Interaction

rc-tree:
rc-tree supports various user interactions, including drag-and-drop, selection, and context menus. This makes it suitable for applications that require rich user engagement with the tree structure.
react-treebeard:
react-treebeard provides basic interactions like expanding and collapsing nodes, making it user-friendly for simple navigation through hierarchical data without complex interactions.
react-checkbox-tree:
react-checkbox-tree focuses on checkbox interactions, allowing users to select multiple nodes easily. It is ideal for scenarios where selection is the primary interaction, such as filtering or categorizing items.
react-sortable-tree:
react-sortable-tree emphasizes drag-and-drop functionality, enabling users to reorder nodes intuitively. This interaction model is perfect for applications where the organization of items is user-driven.

Performance

rc-tree:
rc-tree is optimized for performance, supporting features like virtual scrolling and lazy loading, which are essential for handling large datasets efficiently without compromising user experience.
react-treebeard:
react-treebeard is lightweight and performs well for small to medium-sized trees. However, it may not handle very large datasets as efficiently as rc-tree due to its simpler architecture.
react-checkbox-tree:
react-checkbox-tree performs well for moderate datasets, but may face performance issues with very large trees due to its reliance on rendering all nodes at once. It's best suited for smaller to medium-sized trees.
react-sortable-tree:
react-sortable-tree is designed for performance with drag-and-drop functionality, but performance can degrade with very large trees if not implemented with optimizations like memoization.

Learning Curve

rc-tree:
rc-tree has a moderate learning curve due to its extensive features and customization options. Developers may need to invest time to understand its API and capabilities fully.
react-treebeard:
react-treebeard is easy to learn and implement, making it suitable for developers looking for a simple tree structure without complex interactions or configurations.
react-checkbox-tree:
react-checkbox-tree is relatively easy to learn, especially for developers familiar with checkbox inputs. Its straightforward API allows for quick implementation in projects requiring checkbox functionality.
react-sortable-tree:
react-sortable-tree has a moderate learning curve, particularly for implementing drag-and-drop features. Developers will need to understand how to manage state effectively for reordering items.

Use Cases

rc-tree:
rc-tree is ideal for applications that require complex tree structures with features like drag-and-drop, lazy loading, and dynamic updates, such as file explorers or hierarchical data management systems.
react-treebeard:
react-treebeard is suitable for applications needing a basic tree view for navigation or simple data representation, such as displaying organizational structures or simple category trees.
react-checkbox-tree:
react-checkbox-tree is best for scenarios where users need to select multiple items from a hierarchical structure, such as category selection in e-commerce or filtering options in search interfaces.
react-sortable-tree:
react-sortable-tree is perfect for applications that require user-driven reordering of items, such as task management apps or content organization tools.

API

Tree props

name	description	type	default
autoExpandParent	whether auto expand parent treeNodes	bool	false
checkable	whether support checked	bool/React Node	false
checkedKeys	Controlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. When set checkable and checkStrictly, it should be an object, which contains checked array and halfChecked array.	String[]/{checked:Array,halfChecked:Array}	[]
checkStrictly	check node precisely, parent and children nodes are not associated	bool	false
className	additional css class of root dom node	String	''
defaultCheckedKeys	default checked treeNodes	String[]	[]
defaultExpandedKeys	expand specific treeNodes	String[]	[]
defaultExpandAll	expand all treeNodes	bool	false
defaultExpandParent	auto expand parent treeNodes when init	bool	true
defaultSelectedKeys	default selected treeNodes	String[]	[]
disabled	whether disabled the tree	bool	false
draggable	whether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.)	bool \| ({ node }) => boolean	false
expandedKeys	Controlled expand specific treeNodes	String[]	-
filterTreeNode	filter some treeNodes as you need. it should return true	function(node)	-
icon	customize icon. When you pass component, whose render will receive full TreeNode props as component props	element/Function(props)	-
loadedKeys	Mark node is loaded when `loadData` is true	String[]	-
loadData	load data asynchronously and the return value should be a promise	function(node)	-
multiple	whether multiple select	bool	false
prefixCls	prefix class	String	'rc-tree'
selectable	whether can be selected	bool	true
selectedKeys	Controlled selected treeNodes(After setting, defaultSelectedKeys will not work)	String[]	[]
showIcon	whether show icon	bool	true
showLine	whether show line	bool	false
treeData	treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array)	array<{key,title,children, [disabled, selectable]}>	-
onCheck	click the treeNode/checkbox to fire	function(checkedKeys, e:{checked: bool, checkedNodes, node, event, nativeEvent})	-
onExpand	fire on treeNode expand or not	function(expandedKeys, {expanded: bool, node, nativeEvent})	-
onDragEnd	it execs when fire the tree's dragend event	function({event,node})	-
onDragEnter	it execs when fire the tree's dragenter event	function({event,node,expandedKeys})	-
onDragLeave	it execs when fire the tree's dragleave event	function({event,node})	-
onDragOver	it execs when fire the tree's dragover event	function({event,node})	-
onDragStart	it execs when fire the tree's dragstart event	function({event,node})	-
onDrop	it execs when fire the tree's drop event	function({event, node, dragNode, dragNodesKeys})	-
onLoad	Trigger when a node is loaded. If you set the `loadedKeys`, you must handle `onLoad` to avoid infinity loop	function(loadedKeys, {event, node})	-
onMouseEnter	call when mouse enter a treeNode	function({event,node})	-
onMouseLeave	call when mouse leave a treeNode	function({event,node})	-
onRightClick	select current treeNode and show customized contextmenu	function({event,node})	-
onSelect	click the treeNode to fire	function(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent})	-
switcherIcon	specific the switcher icon.	ReactNode / (props: TreeNodeAttribute) => ReactNode	-
virtual	Disable virtual scroll when `false`	boolean	-
allowDrop	Whether to allow drop on node	({ dragNode, dropNode, dropPosition }) => boolean	-
dropIndicatorRender	The indicator to render when dragging	({ dropPosition, dropLevelOffset, indent: number, prefixCls }) => ReactNode	-
direction	Display direction of the tree, it may affect dragging behavior	`ltr` \| `rtl`	-
expandAction	Tree open logic, optional: false \| `click` \| `doubleClick`	string \| boolean	`click`

name

description

type

default

autoExpandParent

whether auto expand parent treeNodes

bool

false

checkable

whether support checked

bool/React Node

false

checkedKeys

Controlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. When set checkable and checkStrictly, it should be an object, which contains checked array and halfChecked array.

String[]/{checked:Array,halfChecked:Array}

[]

checkStrictly

check node precisely, parent and children nodes are not associated

bool

false

className

additional css class of root dom node

String

defaultCheckedKeys

default checked treeNodes

String[]

[]

defaultExpandedKeys

expand specific treeNodes

String[]

[]

defaultExpandAll

expand all treeNodes

bool

false

defaultExpandParent

auto expand parent treeNodes when init

bool

true

defaultSelectedKeys

default selected treeNodes

String[]

[]

disabled

whether disabled the tree

bool

false

draggable

whether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.)

bool | ({ node }) => boolean

false

expandedKeys

Controlled expand specific treeNodes

String[]

filterTreeNode

filter some treeNodes as you need. it should return true

function(node)

icon

customize icon. When you pass component, whose render will receive full TreeNode props as component props

element/Function(props)

loadedKeys

Mark node is loaded when loadData is true

String[]

loadData

load data asynchronously and the return value should be a promise

function(node)

multiple

whether multiple select

bool

false

prefixCls

prefix class

String

'rc-tree'

selectable

whether can be selected

bool

true

selectedKeys

Controlled selected treeNodes(After setting, defaultSelectedKeys will not work)

String[]

[]

showIcon

whether show icon

bool

true

showLine

whether show line

bool

false

treeData

treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array)

array<{key,title,children, [disabled, selectable]}>

onCheck

click the treeNode/checkbox to fire

function(checkedKeys, e:{checked: bool, checkedNodes, node, event, nativeEvent})

onExpand

fire on treeNode expand or not

function(expandedKeys, {expanded: bool, node, nativeEvent})

onDragEnd

it execs when fire the tree's dragend event

function({event,node})

onDragEnter

it execs when fire the tree's dragenter event

function({event,node,expandedKeys})

onDragLeave

it execs when fire the tree's dragleave event

function({event,node})

onDragOver

it execs when fire the tree's dragover event

function({event,node})

onDragStart

it execs when fire the tree's dragstart event

function({event,node})

onDrop

it execs when fire the tree's drop event

function({event, node, dragNode, dragNodesKeys})

onLoad

Trigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loop

function(loadedKeys, {event, node})

onMouseEnter

call when mouse enter a treeNode

function({event,node})

onMouseLeave

call when mouse leave a treeNode

function({event,node})

onRightClick

select current treeNode and show customized contextmenu

function({event,node})

onSelect

click the treeNode to fire

function(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent})

switcherIcon

specific the switcher icon.

ReactNode / (props: TreeNodeAttribute) => ReactNode

virtual

Disable virtual scroll when false

boolean

allowDrop

Whether to allow drop on node

({ dragNode, dropNode, dropPosition }) => boolean

dropIndicatorRender

The indicator to render when dragging

({ dropPosition, dropLevelOffset, indent: number, prefixCls }) => ReactNode

direction

Display direction of the tree, it may affect dragging behavior

ltr | rtl

expandAction

Tree open logic, optional: false | click | doubleClick

string | boolean

click

TreeNode props

note: if you have a lot of TreeNode, like more than 1000,
make the parent node is collapsed by default, will obvious effect, very fast.
Because the children hide TreeNode will not insert into dom.

name	description	type	default
className	additional class to treeNode	String	''
checkable	control node checkable if Tree is checkable	bool	false
style	set style to treeNode	Object	''
disabled	whether disabled the treeNode	bool	false
disableCheckbox	whether disable the treeNode' checkbox	bool	false
title	tree/subTree's title	String/element/((data: DataNode) => React.ReactNode)	'---'
key	it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes	String	treeNode's position
isLeaf	whether it's leaf node	bool	false
icon	customize icon. When you pass component, whose render will receive full TreeNode props as component props	element/Function(props)	-
switcherIcon	specific the switcher icon.	ReactNode / (props: TreeNodeAttribute) => ReactNode	-

name

description

type

default

className

additional class to treeNode

String

checkable

control node checkable if Tree is checkable

bool

false

style

set style to treeNode

Object

disabled

whether disabled the treeNode

bool

false

disableCheckbox

whether disable the treeNode' checkbox

bool

false

title

tree/subTree's title

String/element/((data: DataNode) => React.ReactNode)

'---'

key

it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes

String

treeNode's position

isLeaf

whether it's leaf node

bool

false

icon

customize icon. When you pass component, whose render will receive full TreeNode props as component props

element/Function(props)

switcherIcon

specific the switcher icon.

ReactNode / (props: TreeNodeAttribute) => ReactNode

Note

The number of treeNodes can be very large, but when enable checkable, it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates), to avoid double computing. But, this bring some restrictions, when you async load treeNodes, you should render tree like this {this.state.treeData.length ? <Tree ...>{this.state.treeData.map(t => <TreeNode ... />)}</Tree> : 'loading tree'}

Customization

User Interaction

Performance

Learning Curve

Use Cases

rc-tree

Screenshots

Feature

Example

Install

Usage

API

Tree props

TreeNode props

Note

Development

Test Case

Coverage

License

Other tree views