Tree

A collapsible tree view component for Ink 5. Displays hierarchical data with expand/collapse, keyboard navigation, and custom rendering.

Install

npm install @matthesketh/ink-tree

Usage

import React, { useState } from 'react';
import { render } from 'ink';
import { Tree, type TreeNode } from '@matthesketh/ink-tree';

const data: TreeNode[] = [
  {
    id: 'src',
    label: 'src',
    children: [
      { id: 'index', label: 'index.ts' },
      {
        id: 'components',
        label: 'components',
        children: [
          { id: 'app', label: 'App.tsx' },
          { id: 'header', label: 'Header.tsx' },
        ],
      },
    ],
  },
];

function App() {
  const [expanded, setExpanded] = useState(new Set(['src', 'components']));
  const [selected, setSelected] = useState('index');

  return (
    <Tree
      nodes={data}
      expandedIds={expanded}
      selectedId={selected}
      maxVisible={10}
    />
  );
}

render(<App />);

API

TreeNode

interface TreeNode {
  id: string;
  label: string;
  children?: TreeNode[];
  data?: unknown;
}

TreeProps

Prop	Type	Default	Description
nodes	TreeNode[]	required	Tree data
selectedId	string	-	Highlighted node id
expandedIds	Set<string>	new Set()	Which nodes are expanded
maxVisible	number	-	Windowed display limit
renderNode	(node, depth, selected, expanded) => ReactNode	default renderer	Custom node renderer
indent	number	2	Spaces per indentation level

flattenTree

function flattenTree(nodes: TreeNode[], expandedIds: Set<string>): FlatNode[];

Utility to flatten a tree into a visible list based on expanded state. Useful for building custom tree implementations.

Visual

Collapsed tree shows indicator arrows for expandable nodes and dot for leaves, with tree connector lines for hierarchy.

License

MIT