React Tree Component – Bildirimsel olarak uygulanabilen bir React ağaç bileşeni

React’te bir ağaç (Tree) arayüzü uygulamak gerektiğinde, durumu yönetmeyi ve stillendirmeyi doğrudan kendiniz ele alırsanız düşündüğünüzden daha fazla kod ve tekrar eden iş gerekir. Bunu basitleştirmek için react-tree adlı bir açık kaynak proje oluşturdum.

Başlıca özellikler

🌳 Bildirimsel API
Ağacı React bileşeni yaklaşımıyla doğal biçimde tanımlayabildiğiniz için dosya gezgini veya hiyerarşik arayüzler yazmak kolaylaşır.

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

📄 JSON veri desteği
TreeWithJson bileşenini kullanırsanız, ayrı bir eşleme mantığına gerek kalmadan JSON verisini doğrudan ağaç yapısı olarak render edebilirsiniz.
👉 Tree With JSON Demo

🎨 Güçlü özelleştirme
Her düğümü istediğiniz arayüze dönüştürebilecek şekilde tasarlandığı için, yalnızca düz metinle sınırlı kalmaz; simgeler, butonlar, durum göstergeleri gibi öğelerle kolayca genişletilebilir.

🔧 TypeScript desteği
Generic tabanlı tip tanımları içerdiğinden güvenle kullanabilirsiniz.

Kurulum

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

---

React’te ağaç yapısı uygulaması gerekenler için faydalı olmasını umuyorum.
Geri bildirimler, hata raporları ve özellik önerilerinin hepsi memnuniyetle karşılanır 🙌