React Complex Tree

React Complex Tree is a zero-dependency React component for rendering interactive tree views — file explorers, nested navigation, category pickers, or any hierarchical data structure. Unlike most tree libraries, it makes no assumptions about styling or markup: every node is fully customizable through swappable renderers, while sensible default CSS classes keep integration simple out of the box.

What sets it apart is how much interaction complexity it handles natively rather than pushing onto consumers. Multi-selection with range and toggle semantics, drag-and-drop that supports moving multiple selected items at once (within a tree or across multiple trees sharing state), inline renaming via F2, type-ahead search, and a full implementation of the W3C accessible-tree keyboard pattern all ship built in. Both a controlled interface (you own all state) and an uncontrolled interface (the library manages view state internally via a pluggable data provider) are available, so teams can start simple and take over specific behaviors only as needed.

The library is actively maintained with frequent releases and a comprehensive Docusaurus documentation site covering guides, migration notes between major versions, and an FAQ. Its author has since begun work on a successor project, Headless Tree, though React Complex Tree itself continues to receive updates and is the more mature, stable choice for teams today.

What You Get

• Unopinionated rendering - every tree node, arrow, and container is rendered through swappable renderer components, so visual design is entirely up to the consumer.
• Controlled and uncontrolled environments - use ControlledTreeEnvironment for full state ownership or UncontrolledTreeEnvironment with a StaticTreeDataProvider for zero-boilerplate setup.
• Built-in multi-select drag-and-drop - select multiple items across one or several linked trees and drag them together to a new location, with configurable rules for what can be dropped where.
• Full keyboard and screen-reader support - implements the W3C ARIA tree design pattern so every action (focus, expand, select, rename, drag) works without a mouse.
• Inline renaming and type-ahead search - press F2 to rename an item in place, or start typing while the tree is focused to jump to the first matching item.
• Zero runtime dependencies - the package adds no transitive dependencies to a project beyond its React peer dependency.

Common Use Cases

• Building a file/folder explorer UI - developers building an IDE-like or file-management interface use it for hierarchical navigation with drag-to-move and rename support.
• Nested category or taxonomy pickers - product teams use it to let users browse and multi-select nested categories, tags, or org-chart nodes.
• Reorderable content trees - CMS or documentation tools use its drag-and-drop to let editors reorganize nested pages or sections.
• Accessible admin/dashboard navigation - teams needing WCAG-compliant nested navigation adopt it for its built-in ARIA tree keyboard handling.

Under The Hood

Architecture The library composes behavior through nested React context providers: ControlledTreeEnvironment wraps InteractionManagerProvider, DragAndDropProvider, and EnvironmentActionsProvider, exposing a single TreeEnvironmentContext (consumed via useTreeEnvironment) that every descendant reads from. UncontrolledTreeEnvironment sits on top of the controlled environment and owns view state internally, delegating data access to a pluggable TreeDataProvider abstraction (StaticTreeDataProvider, CompleteTreeDataProvider) so sync and async data sources share one interface. Concerns are split into dedicated hook-based modules — drag-and-drop position evaluation, hotkey/keyboard bindings, imperative ref-based actions for both the environment and individual trees, and a renderer registry (createDefaultRenderers/useRenderers) that lets every DOM node be overridden — with an INTERNALS export as an escape hatch for advanced customization. Because nearly every module reads from the same context shape, changes to the core TreeItem/environment prop types would ripple through renderers, action hooks, and the drag-position calculator alike.

Tech Stack Written in TypeScript (the majority of the codebase) as a React component library with a react >=16.0.0 peer dependency and no runtime dependencies of its own. The repository is a Lerna/Yarn-workspaces monorepo, building three output targets (CommonJS, ESM, esnext) via tsc plus a UMD bundle via Webpack, alongside a Storybook-based demo package and a Docusaurus documentation site. Linting runs ESLint with the Airbnb TypeScript config plus Prettier; releases and verification run through several GitHub Actions workflows, including scheduled CodeQL security analysis.

Code Quality Jest with React Testing Library and a jsdom environment cover the core interaction surfaces — selection, drag-and-drop restrictions, keyboard navigation, and the uncontrolled environment — as dedicated spec files under the package’s test/ directory. Comprehensive exported TypeScript types (generic TreeItem<T>, environment prop types) give consumers strong compile-time safety. Naming is consistent (camelCase use* hooks, PascalCase providers/components), and CI enforces lint and test runs on every push and pull request, though line-level coverage is not exhaustive.

API Design Getting started requires minimal boilerplate: wrap a StaticTreeDataProvider and a root item in UncontrolledTreeEnvironment, drop in a Tree component, and multi-select, drag-and-drop, renaming, and accessible keyboard handling all work without additional wiring. The controlled/uncontrolled split lets teams start simple and progressively take over specific state as their needs grow, which is a more graduated learning curve than most tree libraries offer. Full accessibility semantics being a default rather than an opt-in plugin is unusual among comparable component libraries. The documentation site is extensive, with guides, an FAQ, and versioned migration notes, though the sheer number of configurable environment props gives advanced customization a moderate learning curve.