feat: add getTreeLinePrefix utility for tree connector line

[rayshoo]

Add a getTreeLinePrefix() utility function that generates tree connector line prefixes (├, └, │) for nodes, similar to the Unix tree command output.

Currently, react-arborist does not provide a built-in way to render tree connector lines. Users have to implement the parent-traversal logic themselves in custom node renderers. This utility solves that.

Features

• Generates correct connector lines by traversing ancestor nodes
• Customizable characters via TreeLineChars option
• Works with any tree depth
• Exported from package root for easy access

Usage

import { getTreeLinePrefix } from "react-arborist";

function MyNode({ node, style }: NodeRendererProps<MyData>) {
  const icon = node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁";
  return (
    <div style={style}>
      <span style={{ fontFamily: "monospace", fontSize: 16 }}>
        {getTreeLinePrefix(node)}
      </span>
      {icon} {node.data.name}
    </div>
  );
}


Result

📂 src
├ 📂 components
│ ├ 📄 Button.tsx
│ ├ 📄 Input.tsx
│ └ 📂 layout
│   ├ 📄 Header.tsx
│   ├ 📄 Footer.tsx
│   └ 📄 Sidebar.tsx
├ 📂 pages
│ ├ 📄 Home.tsx
│ └ 📄 About.tsx
├ 📄 App.tsx
└ 📄 main.tsx
📂 public
├ 📄 favicon.ico
└ 📄 index.html
📄 package.json
📄 README.md

Styling Note

The prefix uses Box Drawing characters which require a monospace font for correct alignment. Wrap the prefix in a <span> with fontFamily: "monospace" and use a consistent fontSize (e.g. 14–16px). Inherited line-height or font-size from parent elements
can cause misalignment.

Custom Characters

// ASCII-only style
getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "| ", blank: "  " })