Building Drag-and-Drop Tree Views with he-tree-react in React

Source: Dev.to

he‑tree‑react is a powerful React library for building tree components with drag‑and‑drop, sorting, and flexible data manipulation. It provides an intuitive API for creating interactive hierarchical structures where users can reorder nodes, move items between branches, and organize data.

Prerequisites

• Node.js ≥ 14.0
• npm, yarn, or pnpm
• A React project (React ≥ 16.8) – e.g., a project created with create‑react‑app
• Basic knowledge of React hooks (useState, useEffect)
• Familiarity with JavaScript/TypeScript
• Understanding of tree data structures and drag‑and‑drop concepts

Installation

# npm
npm install he-tree-react

# yarn
yarn add he-tree-react

# pnpm
pnpm add he-tree-react

After installation, your package.json should contain something like:

{
  "dependencies": {
    "he-tree-react": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Basic Drag‑and‑Drop Tree

Create a simple tree component.

src/TreeExample.jsx

import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialData = [
  {
    id: 1,
    text: 'Item 1',
    children: [
      { id: 2, text: 'Child 1' },
      { id: 3, text: 'Child 2' }
    ]
  },
  {
    id: 4,
    text: 'Item 2',
    children: [{ id: 5, text: 'Child 3' }]
  },
  { id: 6, text: 'Item 3' }
];

function TreeExample() {
  const [data, setData] = useState(initialData);

  return (
    <Tree
      data={data}
      draggable
      droppable
      onChange={setData}
    />
  );
}

export default TreeExample;

src/App.jsx

import React from 'react';
import TreeExample from './TreeExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TreeExample />
    </div>
  );
}

export default App;

Running the app now displays a basic tree with full drag‑and‑drop support.

Core Concepts

Advanced Example – File Explorer

src/AdvancedTreeExample.jsx

import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const advancedData = [
  {
    id: 1,
    text: 'Documents',
    children: [
      { id: 2, text: 'Project 1' },
      { id: 3, text: 'Project 2' }
    ]
  },
  {
    id: 4,
    text: 'Images',
    children: [
      { id: 5, text: 'Vacation' },
      { id: 6, text: 'Family' }
    ]
  },
  { id: 7, text: 'Downloads' }
];

function AdvancedTreeExample() {
  const [data, setData] = useState(advancedData);
  const [selectedNode, setSelectedNode] = useState(null);

  const handleNodeClick = (node) => {
    setSelectedNode(node);
    console.log('Selected node:', node);
  };

  return (
    <div className="advanced-example">
      {/* Tree panel */}
      <section>
        <h3>File Tree</h3>
        <Tree
          data={data}
          draggable
          droppable
          onChange={setData}
          onNodeClick={handleNodeClick}
        />
      </section>

      {/* Details panel */}
      <section>
        <h3>Selected Node</h3>
        {selectedNode ? (
          <div>
            <p><strong>Text:</strong> {selectedNode.text}</p>
            <p><strong>ID:</strong> {selectedNode.id}</p>
            <p><strong>Has Children:</strong> {selectedNode.children ? 'Yes' : 'No'}</p>
          </div>
        ) : (
          <p>No node selected</p>
        )}
      </section>
    </div>
  );
}

export default AdvancedTreeExample;

This example demonstrates:

• Multiple nesting levels
• Node selection handling (onNodeClick)
• Displaying details of the selected node

Real‑World Use‑Case – Task Organizer

src/TaskOrganizer.jsx

import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialTasks = [
  {
    id: 1,
    text: '📋 Project Planning',
    children: [
      { id: 2, text: '✅ Define requirements' },
      { id: 3, text: '⏳ Create timeline' },
      { id: 4, text: '📝 Write proposal' }
    ]
  },
  {
    id: 5,
    text: '💻 Development',
    children: [
      { id: 6, text: '✅ Setup project' },
      { id: 7, text: '⏳ Implement features' },
      { id: 8, text: '📝 Write tests' }
    ]
  },
  {
    id: 9,
    text: '🚀 Deployment',
    children: [{ id: 10, text: '📝 Prepare release' }]
  }
];

function TaskOrganizer() {
  const [tasks, setTasks] = useState(initialTasks);

  const handleChange = (newData) => {
    setTasks(newData);
    console.log('Tasks updated:', newData);
  };

  return (
    <div className="task-organizer">
      <h3>Task Organizer</h3>
      <p>Drag and drop tasks to reorganize them</p>
      <Tree
        data={tasks}
        draggable
        droppable
        onChange={handleChange}
      />
    </div>
  );
}

export default TaskOrganizer;

Use this component to let users reorder tasks, move subtasks between categories, and keep the hierarchy up‑to‑date.

Summary of Features

• Tree – Main component with built‑in drag‑and‑drop.
• Node schema – id, text, optional children.
• Props
  • data – Tree data array.
  • onChange – Callback receiving the updated tree after a move.
  • draggable / droppable – Enable drag‑and‑drop.
  • onNodeClick – Optional click handler for node selection.
• State handling – Keep the tree data in React state and update via onChange.
• Nested structures – Unlimited depth supported out of the box.

Next Steps

1. Add custom node rendering – Use the renderNode prop (if available) to display icons, checkboxes, etc.
2. Persist changes – Send the updated tree to a backend via an API call inside onChange.
3. Styling – Override default styles with CSS modules or styled‑components for a polished UI.

Happy coding with he‑tree‑react!

File Manager Component

// src/FileManager.jsx
import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialFiles = [
  {
    id: 1,
    text: '📁 Documents',
    children: [
      { id: 2, text: '📄 report.pdf' },
      { id: 3, text: '📄 presentation.pptx' }
    ]
  },
  {
    id: 4,
    text: '📁 Images',
    children: [
      { id: 5, text: '🖼️ photo1.jpg' },
      { id: 6, text: '🖼️ photo2.png' }
    ]
  },
  { id: 7, text: '📄 readme.txt' }
];

function FileManager() {
  const [files, setFiles] = useState(initialFiles);

  return (
    <div className="file-manager">
      <h3>File Manager</h3>
      <p>Drag files and folders to reorganize</p>
      <Tree
        data={files}
        draggable
        droppable
        onChange={setFiles}
      />
    </div>
  );
}

export default FileManager;

App Integration

// src/App.jsx
import React from 'react';
import TaskOrganizer from './TaskOrganizer';
import FileManager from './FileManager';
import './App.css';

function App() {
  return (
    <div className="App">
      <TaskOrganizer />
      <FileManager />
    </div>
  );
}

export default App;

What This Example Demonstrates

• Task organizer interface
• Drag‑and‑drop functionality
• File manager with node re‑organization
• State management via React hooks
• Interactive tree structure

Troubleshooting

Next Steps

Now that you understand the basics of he‑tree‑react, you can explore more advanced features:

• Custom node rendering
• Drag constraints (e.g., only allow certain nodes to be dropped)
• Search and filtering within the tree
• Context menus for node actions
• Custom drag handles
• Integration with external state management libraries (Redux, Zustand, etc.)

Check the official repository for more details:
🔗

Summary

You’ve successfully set up he‑tree‑react in a React application, created a drag‑and‑drop tree view, and learned how to manage its state. The library offers a powerful, flexible solution for building interactive hierarchical data displays in React.

Keywords

• he-tree-react
• he-tree-react drag and drop
• React drag and drop tree
• he-tree-react installation
• React tree component
• he-tree-react tutorial
• React hierarchical data
• he-tree-react example
• React sortable tree
• he-tree-react setup
• React tree view library
• he-tree-react getting started
• React interactive tree
• he-tree-react advanced usage