React Tree Component – deklarativ umsetzbare React-Baumkomponente

Wenn man in React eine Tree-UI implementieren muss, sind oft mehr Code und wiederholte Arbeit nötig als gedacht, wenn man Statusverwaltung und Styling selbst übernimmt. Um das zu vereinfachen, habe ich ein Open-Source-Projekt namens react-tree erstellt.

Hauptmerkmale

🌳 Deklarative API
Der Baum lässt sich auf natürliche Weise im Stil von React-Komponenten deklarieren, sodass sich Datei-Explorer oder hierarchische UIs leicht erstellen lassen.

<Tree>  
  <TreeItem>  
    <TreeItemLayout>Documents</TreeItemLayout>  
    <Tree>  
      <TreeItem>File A</TreeItem>  
      <TreeItem>File B</TreeItem>  
    </Tree>  
  </TreeItem>  
</Tree>  

📄 Unterstützung für JSON-Daten
Mit der Komponente TreeWithJson können JSON-Daten ohne separate Mapping-Logik direkt als Baumstruktur gerendert werden.
👉 Tree With JSON Demo

🎨 Leistungsstarke Anpassbarkeit
Die Bibliothek ist so konzipiert, dass sich jeder Knoten in die gewünschte UI umwandeln lässt, sodass sich nicht nur einfacher Text, sondern auch Icons, Buttons oder Statusanzeigen leicht erweitern lassen.

🔧 TypeScript-Unterstützung
Enthält generikbasierte Typdefinitionen und kann dadurch sicher verwendet werden.

Installation

npm install @roseline124/react-tree  
yarn add @roseline124/react-tree  
pnpm add @roseline124/react-tree  

Demo

Basic Tree
Tree With Json

GitHub

👉 https://github.com/roseline124/react-tree

---

Ich hoffe, das ist hilfreich für alle, die in React einen Baum implementieren müssen.
Feedback, Bug-Reports und Funktionsvorschläge sind alle willkommen 🙌