React Tree Component – Komponen tree React yang dapat diimplementasikan secara deklaratif

Saat perlu mengimplementasikan UI tree di React, menangani state management dan styling secara langsung sering kali membutuhkan lebih banyak kode dan pekerjaan berulang daripada yang dibayangkan. Untuk menyederhanakan hal ini, saya membuat open source bernama react-tree.

Fitur utama

🌳 API deklaratif
Anda dapat mendeklarasikan tree secara alami dengan gaya komponen React, sehingga mudah untuk membuat file explorer atau UI struktur hierarkis.

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

📄 Dukungan data JSON
Dengan menggunakan komponen TreeWithJson, Anda dapat merender data JSON langsung sebagai struktur tree tanpa logika mapping tambahan.
👉 Demo Tree With JSON

🎨 Kustomisasi yang kuat
Dirancang agar setiap node dapat diubah menjadi UI sesuai kebutuhan, sehingga mudah diperluas tidak hanya untuk teks sederhana, tetapi juga ikon, tombol, indikator status, dan lainnya.

🔧 Dukungan TypeScript
Menyertakan definisi tipe berbasis generik sehingga dapat digunakan dengan aman.

Instalasi

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

---

Semoga ini bermanfaat bagi siapa saja yang perlu mengimplementasikan tree di React.
Masukan, laporan bug, dan usulan fitur semuanya sangat diterima 🙌