Tools: Building Tree Views with react-arborist in React

Prerequisites ## Installation ## Project Setup ## First Example / Basic Usage ## Understanding the Basics ## Practical Example / Building Something Real ## Common Issues / Troubleshooting ## Next Steps ## Summary ## SEO Keywords 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. Before you begin, make sure you have: Install react-arborist using your preferred package manager: After installation, your package.json should include: react-arborist requires minimal setup. Import the Tree component and provide tree data structure. Let's create a simple tree view. Create a new file src/TreeExample.jsx: This creates a basic tree view with expandable folders and nodes. The tree automatically handles: react-arborist provides tree view components: Here's an example with event handlers: Let's build a file explorer with custom styling and actions: Now create a directory structure viewer: This example demonstrates: Tree not rendering: Make sure your data structure is correct. Each node needs id and name properties. Check that initialData is an array. Nodes not expanding: Verify that nodes with children have a children array. Check that onToggle handler is working correctly. Selection not working: Ensure onSelect handler is provided. Check that nodes are clickable and not disabled. Drag and drop not working: Make sure drag and drop is enabled. Check browser console for errors related to drag events. Performance issues: For large trees, react-arborist uses virtual rendering. Ensure you're not rendering too many nodes at once. Consider lazy loading children. 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. Now that you have an understanding of react-arborist: 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. 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 Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: npm install react-arborist Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm install react-arborist COMMAND_BLOCK: npm install react-arborist CODE_BLOCK: yarn add react-arborist Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: yarn add react-arborist CODE_BLOCK: yarn add react-arborist CODE_BLOCK: pnpm add react-arborist Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: pnpm add react-arborist CODE_BLOCK: pnpm add react-arborist CODE_BLOCK: { "dependencies": { "react-arborist": "^3.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "dependencies": { "react-arborist": "^3.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } CODE_BLOCK: { "dependencies": { "react-arborist": "^3.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } CODE_BLOCK: // 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; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // 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; CODE_BLOCK: // 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; CODE_BLOCK: // 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; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // 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; CODE_BLOCK: // 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; COMMAND_BLOCK: // 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; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: // 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; COMMAND_BLOCK: // 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; COMMAND_BLOCK: // 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; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: // 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; COMMAND_BLOCK: // 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; COMMAND_BLOCK: // 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; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: // 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; COMMAND_BLOCK: // 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; CODE_BLOCK: // 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; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // 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; CODE_BLOCK: // 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; - 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 - 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) - 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 - 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 - File explorer interface - Node selection and activation - Rename functionality - Delete functionality - Custom event handlers - Tree data management - Directory structure display - Tree not rendering: Make sure your data structure is correct. Each node needs id and name properties. Check that initialData is an array. - Nodes not expanding: Verify that nodes with children have a children array. Check that onToggle handler is working correctly. - Selection not working: Ensure onSelect handler is provided. Check that nodes are clickable and not disabled. - Drag and drop not working: Make sure drag and drop is enabled. Check browser console for errors related to drag events. - Performance issues: For large trees, react-arborist uses virtual rendering. Ensure you're not rendering too many nodes at once. Consider lazy loading children. - 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. - 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