3.7k stars · MIT | [react-arborist.netlify.app](https://react-arborist.netlify.app/) · v4.0.1 (2026-10-11) · Track this in Rising ↗
A tree list component for React that stays fast with thousands of nodes.
Radar check
What we found when we opened it. Every bar is one fact, with its date.
Last code pushed 11 Oct 2026, 16 days before this check.
Latest release v4.0.1 on 11 Oct 2026.
Public since September 2021, about 5 years.
3,714 stars and 187 forks.
5 commits and 3 new issues in the last 90 days.
31 contributors. 3 pull requests merged in 90 days.
No security policy file says how to report a problem. No published security advisories.
How the bars are scored
- Alive. Days since the last code push: a week or less 100, a month 90, three months 70, six months 50, a year 30, eighteen months 15, older 0.
- Releases. Age of the latest GitHub release, on a similar scale; no bar when the project publishes no releases.
- Maturity. Age of the project: eight years 100, five 90, three 70, two 55, one 40, six months 25, younger 10.
- Adoption. Stars on a log scale: 100,000 stars is 100, 10,000 is 80, 1,000 is 60, 100 is 40.
- Activity. Commits in the last 90 days: 300 or more 100, 100 85, 30 65, 10 45, any 25.
- Community. People who have contributed: 100 or more 100, 30 80, 10 60, 5 40, 2 25, one 10.
- Security. A published security policy 80, none 40; published advisories are listed, not scored.
Checked by Repo Radar on 26 Oct 2026 from the repository on GitHub. Covered in Edition 7.
▶Repo detailsthe review · specs · pros & cons · install
What it does
You give it your data and a component to render one row. It renders only the rows in view, which is what keeps a large tree responsive. It handles keyboard navigation, type-to-find, multiple selection, inline renaming, and drag-and-drop reordering between branches, and it has a built-in filter that hides rows that do not match. You can let it hold the open and selected state itself or control that from your own state. What it does not do is show relationships between separate branches, which is the thing a drawn map does and a list cannot. It also does not include the drag-and-drop engine any more: since version 4 the react-dnd libraries are peer dependencies, which means they are installed alongside rather than bundled in.
Why it matters
Who it suits. Anyone building a file browser, a category picker, an outline view or a settings tree in React, who has discovered that a plain nested list stops being usable at a few hundred rows. It is also the right companion for an interface whose main view is a drawn map: the map is better on a wide screen and a searchable list is better on a phone, and the two can render from the same data. Skip it if the tree has thirty items, because the plain nested list is less code.
Verdict. Worth a day, and the two hard parts — only drawing visible rows, and keyboard movement that a screen reader can follow — are already done. The thing to know before installing is the version situation, which changed four days before this refresh. Version 4.0.1 is tagged on GitHub and published on npm, but the latest tag on npm still points at 3.16.0, so a plain install gives the older line. Version 4 needs React 18 or newer and expects react-dnd version 16 installed alongside, where version 3 bundled version 14 itself; it also moved some internal drag fields, so code that read them directly needs updating. Pick the line deliberately and pin it. The repository also changed owner: it is now under its author's own account rather than Brim Data, where it was written, and the old address redirects.
Summary (Key Points)from the README
Key features
- Drag and drop: Rows can be sorted by dragging, and external drop targets can read the dragged node's data.
- Folder open and close: Nodes can be opened and closed with methods such as open, close, toggle, and openAll.
- Inline renaming: Nodes enter an editing state, then submit a new name or reset.
- Virtualized rendering: The tree uses virtualized rendering, and scrollToOffset and scrollOffset save and restore the scroll position.
- Keyboard navigation and ARIA: The tree includes keyboard navigation and aria attributes.
- Tree filtering: A non-empty searchTerm shows matching nodes with their parents, and filteredCount reports how many nodes match.
- Selection sync: Passing an id to the selection prop selects that node and scrolls to it.
- Controlled or uncontrolled: The initialData prop makes the tree uncontrolled, and the data prop makes it controlled.
- Custom rendering: Custom Row, Node, DragPreview, and Cursor components can replace the defaults, and getTreeLinePrefix builds Unicode tree-line connectors.
Important
- Peer dependencies: react-dnd and react-dnd-html5-backend must be installed alongside the library, and react-arborist requires React 18+ and react-dnd v16.
- Node version for require: require("react-arborist") needs Node 22.12 or later, and package managers that enforce engines will refuse older Node versions even for bundler users.
- CommonJS TypeScript: Projects using Node module resolution need module set to "nodenext" (TypeScript 5.8 or later) or "node20" (TypeScript 5.9 or later), because "node16" and "node18" report error TS1479.
- Shared drag-and-drop backend: If another react-dnd consumer initializes the global manager first, a dndBackend passed to the tree is silently ignored, so pages with several react-dnd consumers should use one DndProvider and pass its manager via dndManager.
- Custom dragType: A row given a custom dragType can no longer be reordered within the tree, because the tree's drop targets accept only "NODE".
- onMove index: The index counts positions before the dragged rows are removed, so handlers that remove rows first must use the adjustMoveIndex helper.
- Loose default search: The default searchMatch JSON-stringifies a node's data, so it can match nested object keys; pass searchMatch to match specific fields.
- Jest setup: ESM-only dependencies need a transformIgnorePatterns entry, isolatedModules set to true, and testEnvironment "jsdom" with "browser" restated in customExportConditions, and "node" must not be added.
- Migration from v3: v3 bundled react-dnd v14 as a regular dependency, but v4 makes it a peer dependency, so apps with custom DnD contexts should adopt the shared DndProvider pattern.
Written by an AI model from the project’s README; not part of the review, and it can be wrong.
- Only visible rows are drawn, so a tree of thousands stays responsive.
- Keyboard navigation and the accessible tree behaviour are built in, which is the part most components skip.
- Rows are your own components, so existing cards and styles can be reused rather than redesigned.
- On npm the default install still gives 3.16.0 while 4.0.1 is published, so the version has to be chosen by hand.
- Version 4 needs React 18 or newer and the drag-and-drop libraries installed separately, so an upgrade is not free.
- A tree cannot show links between branches, so for a map-like view it is a companion rather than a replacement.
npm install react-arborist@4 react-dnd react-dnd-html5-backend
