Direactree

A typed React component for displaying, navigating, and editing directory structures—with selection, toolbox actions, and drag-and-drop built in.

Direactree gives an application a familiar file-explorer experience without requiring you to build recursive rendering, path tracking, editing controls, and move validation from scratch.

Why Direactree

Use Direactree anywhere users need to inspect or manage hierarchical data:

• File managers and IDE-style project explorers
• Content management systems and media libraries
• Category, menu, and organization editors
• Database-backed folder structures
• Read-only directory previews

The component is intentionally persistence-agnostic. It accepts a serializable tree and reports user intent through callbacks, so the same UI can work with local React state, a REST API, or another backend.

How it works

Direactree separates presentation from data ownership:

Your TreeNode[]
      ↓
  <Direactree />
      ↓
selection / create / rename / delete / move events
      ↓
Your state manager or API
      ↓
Updated TreeNode[]

1. Pass a TreeNode[] to structure.
2. Direactree renders the hierarchy and handles its editing interface.
3. Callback props describe what the user selected or attempted to change.
4. Your application updates state or persists the operation.

Core features

• Create a folder at the root or inside any folder.
• Create a file at the root or inside any folder.
• Rename an existing file or folder.
• Delete an existing file or folder.
• Move nodes with drag and drop.
• Observe the current selection as a complete parent path.
• Use the built-in toolbox or provide custom icons.
• Configure indentation, initial expansion, dragging, and sticky controls.
• Use the dedicated Next.js client entry point.

The toolbox can be disabled independently from drag and drop. This makes read-only trees, partially editable trees, and fully editable explorers possible with the same component.

Safety guarantees

Direactree rejects structural operations that would create an invalid tree:

• A file or folder cannot be moved into itself.
• A folder cannot be moved into one of its descendants.
• A file cannot receive child nodes.
• Create operations cannot target a file node.
• onNodeMove is not called for an invalid destination.

Continue with Getting started, experiment with the complete file explorer, or inspect every prop and callback.