Reddit
reddit.com › r/reactjs › i built a lightweight react tree view library — lazy loading, drag & drop, keyboard navigation
r/reactjs on Reddit: I built a lightweight React tree view library — lazy loading, drag & drop, keyboard navigation
4 weeks ago -
I needed a tree view for a side project and couldn't find one that handled lazy loading well without dragging in a bunch of dependencies. So I ended up building my own.
lazy-tree-view is a lightweight React component (~7.5 kB gzipped, zero dependencies) for rendering hierarchical data where children load on demand — file explorers, org charts, nested menus, that kind of thing.
It supports:
Lazy loading with built-in loading/error states and automatic retry
Drag & drop reordering with drop validation
Full keyboard navigation (WAI-ARIA compliant)
Imperative API via
reffor controlling the tree from outsideCustom renderers for branches and items
TypeScript first-class support
📦 npm: npmjs.com/package/lazy-tree-view
💻 GitHub: github.com/javierOrtega95/lazy-tree-view
🔗 Interactive demos: javierortega95.github.io/lazy-tree-view
Would love feedback if anyone gives it a try.
Primer
primer.style › react › TreeView
TreeView | Primer React
A hierarchical list of items where nested items can be expanded and collapsed.
Videos
14:22
Convert tree to folder structure using react - YouTube
Unlock React's Power: Understand Your UI as a Tree Structure
11:34
Getting Started with the React TreeView Component - YouTube
09:05
How to make Node Tree with React Js | ReactJs | Beginners tutorials ...
Getting Started with the React TreeView Component
04:07
React TreeView: The Ultimate Feature Walkthrough - YouTube
Tree View in React
We have found that the mui tree rerenders every single time and causes extreme issues with around 1k+ objects. We have some fuzzy logic to stop it from rerendering 1k+ times. Some reported issues, https://github.com/mui/material-ui/issues/27403 More on reddit.com
8
14
March 6, 2023reactjs - What are all the options on react for tree view - Stack Overflow
I need to create an application. Which should have tree view. In tree only some of them are draggable. Most importantly it should have search option. And it should be clickable and whenever I ri... More on stackoverflow.com
React Arborist v2.0.0 - A Tree View Component
Looks very cool More on reddit.com
12
27
April 18, 2022I built a lightweight React tree view library — lazy loading, drag & drop, keyboard navigation
This is probably the best project I've seen on here in months. Great job. More on reddit.com
4
8
4 weeks agoWhere can I find the Syncfusion React Tree View demo?
You can find our React Tree View demo, which demonstrates how to render and configure Tree View.
syncfusion.com
syncfusion.com › react › tree view
React Tree View | Hierarchical Data Model Tree List | Syncfusion
Why should you choose Syncfusion React Tree View?
The Syncfusion React Tree View component supports the following features: · Display hierarchical data in a tree-view structure. · Load a wide range of nodes with optimal performance. · Flexible data binding with support to use local and remote data sources such as JSON, RESTful services, OData services, and WCF services. · Drag and drop multiple selected tree nodes anywhere. · Select multiple nodes using built-in check boxes. · Edit node text in-line with editable nodes support. · Easily customize nodes, expand icons, and collapse icons. · One of the best React Tree View in the market that off
syncfusion.com
syncfusion.com › react › tree view
React Tree View | Hierarchical Data Model Tree List | Syncfusion
How do I get started with Syncfusion React Tree View?
A good place to start would be our comprehensive getting started documentation.
syncfusion.com
syncfusion.com › react › tree view
React Tree View | Hierarchical Data Model Tree List | Syncfusion
MUI
mui.com › x › react-tree-view
Tree View React component - MUI X
The Tree View components let users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.
GitHub
github.com › brimdata › react-arborist
GitHub - brimdata/react-arborist: The complete tree view component for React · GitHub
The tree view is ubiquitous in software applications. This library provides the React ecosystem with a complete solution to build the equivalent of a VSCode sidebar, Mac Finder, Windows Explorer, or Sketch/Figma layers panel.
Starred by 3.6K users
Forked by 184 users
Languages TypeScript 97.3% | JavaScript 1.3% | CSS 1.1%
Chakra UI
chakra-ui.com › docs › components › tree-view
TreeView | Chakra UI
import { TreeView } from ... </TreeView.Tree> </TreeView.Root> To setup the tree view, you need to use the tree collection to register the tree data....
GitHub
github.com › baurine › react-tree-view
GitHub - baurine/react-tree-view: A simple React TreeView component with flat data structure · GitHub
treeViewData: [ {key: '1', parentKey: '', kind: 'node', name: 'node 1'}, {key: '2', parentKey: '', kind: 'group', name: 'group 1', expand: false}, {key: '3', parentKey: '', kind: 'node', name: 'node 2'}, {key: '4', parentKey: '', kind: 'group', name: 'group 2', expand: false}, {key: '4_1', parentKey: '4', kind: 'node', name: 'node 3'} ], <TreeView data={treeViewData} rootParentKey='' .../> This project is generated by Microsoft/TypeScript-React-Starter scaffold.
Author baurine
npm
npmjs.com › package › react-treeview
react-treeview - npm
June 26, 2017 - Easy, light, flexible tree view made with React.. Latest version: 0.4.7, last published: 9 years ago. Start using react-treeview in your project by running `npm i react-treeview`. There are 32 other projects in the npm registry using react-treeview.
» npm install react-treeview
Published Jun 26, 2017
Version 0.4.7
Author chenglou
Repository https://github.com/chenglou/react-treeview
Syncfusion
syncfusion.com › react › tree view
React Tree View | Hierarchical Data Model Tree List | Syncfusion
React Tree View displays data in a hierarchical tree structure. It supports data binding, load on demand, tree check box, drag and drop, templates, and more.
Published November 18, 2025
Telerik
telerik.com › components › overview
React TreeView Overview - KendoReact
December 19, 2025 - The KendoReact TreeView displays ... operations by using the drag-and-drop functionality. The React TreeView component is part of the KendoReact library of React UI components....
Infragistics
infragistics.com › products › ignite-ui-react › react › components › grids › tree
React Tree Component | Infragistics
Ignite UI for React Tree, also known as TreeView component, is a high-performance control that visualizes expandable data structures within a tree-like UI, enabling you to apply load on demand for child items.
GitHub
github.com › fosco › react-expandable-treeview
GitHub - fosco/react-expandable-treeview: A simple and fully customizable tree view React component
A simple and fully customizable tree view React component - fosco/react-expandable-treeview
Starred by 2 users
Forked by 5 users
Languages JavaScript 98.0% | HTML 2.0% | JavaScript 98.0% | HTML 2.0%
Carbondesignsystem
react.carbondesignsystem.com
Carbon Components React
This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.
ITNEXT
itnext.io › creating-a-dope-expandable-tree-view-in-react-5b32a36082d4
Creating a Dope Expandable Tree View in React | by Andrew Allison | ITNEXT
February 10, 2023 - I tackled the problem using a combination of the selected and expanded props from the TreeView API. In this example we asynchronously load new children and expand the parent once they are loaded. To be able to hold this data in-memory we also need to use a Graph data structure (the only time a data structure has ever been useful to me outside of an engineering interview).
Reddit
reddit.com › r/reactjs › tree view in react
r/reactjs on Reddit: Tree View in React
March 6, 2023 -
Hi,
I have built Tree in React using Material UI Tree View component (https://mui.com/material-ui/react-tree-view/). It works correctly, but when I have about 700+ Tree Items in View, there is a serious performance issue. Whole UI starts to be very slow... I read that Material UI Tree View doesn't support virtualization, so I tried to combine it with some other virtualization libraries, but with no success. Has anyone been in a similar situation, and how did you resolved it? Which virtualization library can work with Tree View?
Thanks in advance
Top answer 1 of 5
4
We have found that the mui tree rerenders every single time and causes extreme issues with around 1k+ objects. We have some fuzzy logic to stop it from rerendering 1k+ times. Some reported issues, https://github.com/mui/material-ui/issues/27403
2 of 5
3
I wrote a huge tree (1000+ nodes) for an enterprise system, and I had no performance issues. However... I didn't use any UI library, just React and SCSS modules. Can't go faster than that.
Stack Overflow
stackoverflow.com › questions › 51593034 › what-are-all-the-options-on-react-for-tree-view
reactjs - What are all the options on react for tree view - Stack Overflow
0 React - Tree Component · 2 Make a Tree view from JSON data using React JS · 2 Reconciling a tree view with React · 1 Recursive tree view in ReactJS · 3 Tree component in react native · 1 Constructing Tree View Object · 2 Own TreeStructure in React - RenderTree ·
Contoso Corporation
pnp.github.io › sp-dev-fx-controls-react › controls › TreeView
TreeView - @pnp/spfx-controls-react
This graphical control allows to present a hierarchical view of information. Each tree item can have a number of subitems. This is often visualized by indentation in a list. A tree item can be expanded to reveal subitems (if exist), and collapsed to hide subitems.
npm
npmjs.com › package › react-accessible-treeview
react-accessible-treeview - npm
June 27, 2025 - A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.. Latest version: 2.11.2, last published: 8 months ago. Start using react-accessible-treeview in your project by running `npm i ...
» npm install react-accessible-treeview
Published Jun 27, 2025
Version 2.11.2
Author lissitz
Joshuawootonn
joshuawootonn.com › react-treeview-component
React treeview component (pt. 1)
February 26, 2023 - This three-part series has been a six-month journey. It started with me creating a treeview where all state and traversals were stored in react.