FileTree

The FileTree component creates a visual directory structure display, ideal for projects requiring a hierarchical view of files and folders with optional notes for each item.

Usage

FileTree Basic Usage

import React from 'react';
import { FileTree } from '~/ui/components/FileTree';

const files = [
  "index.js",
  ["src/App.js", "Main application file"],
  "src/components/Button.js",
  ["src/layouts/MainLayout.js", "Includes sidebar and navbar"]
];

export default function App() {
  return (
    <div>
      <h1>Project Files</h1>
      <FileTree files={files} />
    </div>
  );
}

Rendered Example

index.js

src

App.jsMain component file

styles.css

Props

Name	Type	Default	Description
files	(string \| [string, string])[]	`[]`	Array of file paths or tuples with path and note to generate the tree
className	string	`undefined`	Additional CSS classes applied to the container
style	object	`undefined`	Inline styles applied to the container
onClick	function	`undefined`	Handler for click events on file or folder items
onMouseOver	function	`undefined`	Handler for mouse over events on file or folder items