Building Tree Views with react-arborist in React

react-arborist is a comprehensive React library for building tree view components with features like drag-and-drop, inline renaming, virtual rendering, and keyboard navigation. It provides a powerful API for creating file explorers, directory structures, and hierarchical data displays similar to VS Code's sidebar or Finder. This guide walks through setting up and creating tree views using react-arborist with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

• Node.js version 14.0 or higher installed
• npm, yarn, or pnpm package manager
• A React project (version 16.8 or higher) or create-react-app setup
• Basic knowledge of React hooks (useState, useEffect)
• Familiarity with JavaScript/TypeScript
• Understanding of tree data structures

Installation

Install react-arborist using your preferred package manager:

npm install react-arborist

Or with yarn:

yarn add react-arborist

Or with pnpm:

pnpm add react-arborist

After installation, your package.json should include:

{
  "dependencies": {
    "react-arborist": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-arborist requires minimal setup. Import the Tree component and provide tree data structure.

First Example / Basic Usage

Let's create a simple tree view. Create a new file src/TreeExample.jsx:

// src/TreeExample.jsx
import React from 'react';
import { Tree } from 'react-arborist';

const data = [
  { id: "1", name: "Unread" },
  { id: "2", name: "Threads" },
  {
    id: "3",
    name: "Chat Rooms",
    children: [
      { id: "c1", name: "General" },
      { id: "c2", name: "Random" },
      { id: "c3", name: "Open Source Projects" },
    ],
  },
  {
    id: "4",
    name: "Direct Messages",
    children: [
      { id: "d1", name: "Alice" },
      { id: "d2", name: "Bob" },
      { id: "d3", name: "Charlie" },
    ],
  },
];

function TreeExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Basic Tree Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <Tree initialData={data} />
      </div>
    </div>
  );
}

export default TreeExample;

Update your App.jsx:

// 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;

This creates a basic tree view with expandable folders and nodes. The tree automatically handles:

• Create (Press A for leaf, Shift+A for folder)
• Rename (Press Enter on selected node)
• Delete (Press Delete/Backspace)
• Move (Drag and drop)
• Open/Close (Click folder or press Space)
• Navigate (Arrow keys)

Understanding the Basics

react-arborist provides tree view components:

• Tree: Main tree component
• NodeApi: API for interacting with nodes
• Virtual rendering: Efficient rendering of large trees
• Keyboard navigation: Full keyboard support
• Drag and drop: Move nodes by dragging

Key concepts:

• Tree data structure: Each node has id, name, and optional children array
• Node selection: Click to select, arrow keys to navigate
• Folder expansion: Click folder icon or press Space to toggle
• Inline editing: Press Enter to rename nodes
• Event handlers: Use callbacks to respond to user actions

Here's an example with event handlers:

// src/AdvancedTreeExample.jsx
import React from 'react';
import { Tree, NodeApi } from 'react-arborist';

const data = [
  {
    id: "1",
    name: "Documents",
    children: [
      { id: "1-1", name: "Project1" },
      { id: "1-2", name: "Project2" },
    ],
  },
  {
    id: "2",
    name: "Pictures",
    children: [
      { id: "2-1", name: "Vacation" },
      { id: "2-2", name: "Family" },
    ],
  },
  { id: "3", name: "Downloads" },
];

function AdvancedTreeExample() {
  const handleActivate = (node: NodeApi) => {
    console.log("Activated:", node.data);
    // Typically used for "open" action (double-click or Enter)
  };

  const handleSelect = (nodes: NodeApi[]) => {
    console.log("Selected:", nodes.map(n => n.data));
    // Called whenever selection changes
  };

  const handleFocus = (node: NodeApi) => {
    console.log("Focused:", node.data);
    // Called when focus moves to a different node
  };

  const handleToggle = (id: string) => {
    console.log("Toggled node:", id);
    // Called when a folder opens or closes
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Advanced Tree Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <Tree
          initialData={data}
          onActivate={handleActivate}
          onSelect={handleSelect}
          onFocus={handleFocus}
          onToggle={handleToggle}
        />
      </div>
    </div>
  );
}

export default AdvancedTreeExample;

Practical Example / Building Something Real

Let's build a file explorer with custom styling and actions:

// src/FileExplorer.jsx
import React, { useState } from 'react';
import { Tree, NodeApi } from 'react-arborist';

const fileData = [
  {
    id: "root",
    name: "My Files",
    children: [
      {
        id: "docs",
        name: "Documents",
        children: [
          { id: "doc1", name: "Report.pdf" },
          { id: "doc2", name: "Presentation.pptx" },
        ],
      },
      {
        id: "images",
        name: "Images",
        children: [
          { id: "img1", name: "photo1.jpg" },
          { id: "img2", name: "photo2.png" },
        ],
      },
      { id: "file1", name: "readme.txt" },
    ],
  },
];

function FileExplorer() {
  const [selectedNode, setSelectedNode] = useState(null);
  const [treeData, setTreeData] = useState(fileData);

  const handleActivate = (node: NodeApi) => {
    console.log("Opened:", node.data.name);
    setSelectedNode(node.data);
  };

  const handleSelect = (nodes: NodeApi[]) => {
    if (nodes.length > 0) {
      setSelectedNode(nodes[0].data);
    } else {
      setSelectedNode(null);
    }
  };

  const handleRename = ({ id, name }: { id: string; name: string }) => {
    const updateNode = (nodes: any[]): any[] => {
      return nodes.map(node => {
        if (node.id === id) {
          return { ...node, name };
        }
        if (node.children) {
          return { ...node, children: updateNode(node.children) };
        }
        return node;
      });
    };
    setTreeData(updateNode(treeData));
  };

  const handleDelete = (id: string) => {
    const deleteNode = (nodes: any[]): any[] => {
      return nodes
        .filter(node => node.id !== id)
        .map(node => {
          if (node.children) {
            return { ...node, children: deleteNode(node.children) };
          }
          return node;
        });
    };
    setTreeData(deleteNode(treeData));
  };

  return (
    <div style={{ display: 'flex', height: '500px', padding: '20px' }}>
      <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <h3>File Explorer</h3>
        <Tree
          initialData={treeData}
          onActivate={handleActivate}
          onSelect={handleSelect}
          onRename={handleRename}
          onDelete={handleDelete}
        />
      </div>
      <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <h3>File Details</h3>
        {selectedNode ? (
          <div>
            <p><strong>Name:</strong> {selectedNode.name}</p>
            <p><strong>ID:</strong> {selectedNode.id}</p>
            <p><strong>Type:</strong> {selectedNode.children ? 'Folder' : 'File'}</p>
          </div>
        ) : (
          <p>Select a file or folder to view details</p>
        )}
      </div>
    </div>
  );
}

export default FileExplorer;

Now create a directory structure viewer:

// src/DirectoryViewer.jsx
import React, { useState } from 'react';
import { Tree, NodeApi } from 'react-arborist';

const directoryData = [
  {
    id: "src",
    name: "src",
    children: [
      {
        id: "components",
        name: "components",
        children: [
          { id: "Button.jsx", name: "Button.jsx" },
          { id: "Card.jsx", name: "Card.jsx" },
        ],
      },
      {
        id: "utils",
        name: "utils",
        children: [
          { id: "helpers.js", name: "helpers.js" },
        ],
      },
      { id: "App.jsx", name: "App.jsx" },
      { id: "index.js", name: "index.js" },
    ],
  },
  {
    id: "public",
    name: "public",
    children: [
      { id: "index.html", name: "index.html" },
    ],
  },
  { id: "package.json", name: "package.json" },
];

function DirectoryViewer() {
  const [expandedIds, setExpandedIds] = useState<string[]>(['src', 'components']);

  const handleToggle = (id: string) => {
    setExpandedIds(prev => 
      prev.includes(id) 
        ? prev.filter(expandedId => expandedId !== id)
        : [...prev, id]
    );
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <h2>Directory Structure</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px', backgroundColor: '#f9f9f9' }}>
        <Tree
          initialData={directoryData}
          onToggle={handleToggle}
          openByDefault={false}
        />
      </div>
    </div>
  );
}

export default DirectoryViewer;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FileExplorer from './FileExplorer';
import DirectoryViewer from './DirectoryViewer';
import './App.css';

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

export default App;

This example demonstrates:

• File explorer interface
• Node selection and activation
• Rename functionality
• Delete functionality
• Custom event handlers
• Tree data management
• Directory structure display

Common Issues / Troubleshooting

1. Tree not rendering: Make sure your data structure is correct. Each node needs id and name properties. Check that initialData is an array.

2. Nodes not expanding: Verify that nodes with children have a children array. Check that onToggle handler is working correctly.

3. Selection not working: Ensure onSelect handler is provided. Check that nodes are clickable and not disabled.

4. Drag and drop not working: Make sure drag and drop is enabled. Check browser console for errors related to drag events.

5. Performance issues: For large trees, react-arborist uses virtual rendering. Ensure you're not rendering too many nodes at once. Consider lazy loading children.

6. Styling issues: react-arborist provides default styles. Override with custom CSS or use the className prop. Check that styles aren't being overridden by global CSS.

Next Steps

Now that you have an understanding of react-arborist:

• Explore custom node rendering
• Learn about virtual rendering optimization
• Implement search and filtering
• Add context menus
• Create nested drag and drop
• Integrate with state management
• Check the official repository: https://github.com/brimdata/react-arborist

Summary

You've successfully set up react-arborist in your React application and created tree views with drag and drop, inline editing, and keyboard navigation. react-arborist provides a powerful solution for building file explorers and hierarchical data displays in React applications.

SEO Keywords

react-arborist
react-arborist tree view
React tree component
react-arborist installation
React file explorer
react-arborist tutorial
React directory tree
react-arborist example
React hierarchical data
react-arborist setup
React tree view library
react-arborist getting started
React drag and drop tree
react-arborist advanced usage