AsciiTree

Hierarchical tree view component with ASCII styling and expandable nodes.

Preview

File System Tree

[-]📁src/
[+]📁components/
[+]📁hooks/
└──📄index.ts
[+]📁docs/
└──📦package.json

Organization Chart

[-]🏢TechCorp Inc.
[+]⚙️Engineering
[+]🎨Design
[+]📋Product

Git Repository

[-]📁awesome-project
[-]🌲Branches
└──🔵main ✓
└──🟡feature/new-ui
└──🔴hotfix/critical-bug
[+]📝Recent Commits

Menu Navigation

[+]🏠Dashboard
[+]👥Users
[+]⚙️Settings

API Structure

[-]🌐REST API v2.0
[-]🔑/auth
└──🟢POST /login
└──🔴POST /logout
└──🟡POST /refresh
[+]👥/users

Project Timeline

[-]📅Project Timeline
[+]🗓️Q1 2024
[+]🗓️Q2 2024
[+]🗓️Q3 2024

Database Schema

[-]🗄️PostgreSQL Schema
[-]📊users
└──🔑id (PRIMARY KEY)
└──📧email (UNIQUE)
└──📅created_at
[+]📊posts

Technology Stack

[-]🛠️Tech Stack
[+]🎨Frontend
[+]⚙️Backend
[+]🚀DevOps

Installation

npm install react-ascii-ui

Usage

import { AsciiTree } from 'react-ascii-ui';

const treeData = [
  {
    id: 'root',
    label: 'Project Root',
    children: [
      { id: 'src', label: 'src/', children: [...] },
      { id: 'docs', label: 'docs/', children: [...] }
    ]
  }
];

export default function App() {
  const [selectedNode, setSelectedNode] = useState(null);

  return (
    <AsciiTree
      data={treeData}
      onNodeSelect={setSelectedNode}
      expandable={true}
      showIcons={true}
    />
  );
}

Examples

Nested Folder Structure

[+] 📁 project-root/
[+] 📁 src/
└── 📄 index.js
└── 📄 App.js
[+] 📁 components/
└── 📄 Header.js
└── 📄 Footer.js
[+] 📁 public/
└── 📄 index.html
└── 📦 package.json

Menu Navigation Tree

[-] 🏠 Dashboard
└── 📊 Analytics
└── 📈 Reports
[+] 👥 Users
└── 👤 User List
└── ➕ Add User
[+] ⚙️ Settings
└── 🔧 General
└── 🔒 Security
└── 🎨 Appearance

API Reference

PropTypeDefaultDescription
dataTreeNode[]-Tree data structure
expandablebooleantrueEnable node expansion/collapse
showIconsbooleantrueShow node icons
selectablebooleanfalseEnable node selection
onNodeSelect(node: TreeNode) => voidundefinedNode selection callback
onNodeExpand(node: TreeNode) => voidundefinedNode expansion callback
defaultExpandedstring[][]Default expanded node IDs

Tree Features

  • ✅ Hierarchical data visualization with ASCII characters
  • ✅ Expandable/collapsible nodes with [+] and [-] indicators
  • ✅ Custom icons and labels for different node types
  • ✅ Node selection support with callbacks
  • ✅ Custom node renderers and styling
  • ✅ Customizable appearance and behavior
  • 🔄 Keyboard navigation support (coming soon)
  • 🔄 Multi-selection modes (coming soon)
  • 🔄 Search and filtering capabilities (coming soon)