Skip to main content

folder-tree

A dark-first React tree view. Drag, search, multi-select, keyboard — and nothing renders a control you haven't wired up.

Drag a row. Ctrl-click for multi-select. Type in the search box.
Get startedGitHubnpm

npm install @jugaaadi/folder-tree

No handler, no control

A capability you don't wire up doesn't render its affordance. No dead eye icons, no inert drag handles, nothing that invites a click and does nothing.

Never mutates your tree

nodes is yours. The component reads and calls back. moveNodes is a helper you may ignore if your state lives in a store or on a server.

Search that auto-expands

Matches are revealed wherever they are. Nodes can carry keywords — searchable text that never renders. Clear the box and it collapses back.

Real keyboard support

role="tree" with the interactions that implies: arrows, Home/End, Enter, Space, F2 to rename, Shift for ranges, Ctrl to toggle.

Virtualised past 200 rows

Big trees stay responsive without you configuring anything. The threshold is a prop if your rows are unusual.

Zero dependencies

No runtime deps. React 17+. One CSS file to override or ignore. Pure helpers exported and unit-tested.


Callbacks are intent, not action

onDelete fires with the ids the user asked to remove. Nothing has been removed. Whether anything is destroyed — and whether it can be undone — is your code's decision, not this component's. The same is true of every other callback: it reports what was asked for and leaves your data alone.

Provided as is, without warranty. If deletions are destructive on your side, confirm them and back them up.