React Tree Component – thành phần cây cho React có thể triển khai theo cách khai báo

Khi cần triển khai UI dạng cây (Tree) trong React, nếu tự xử lý quản lý trạng thái và styling thì thường sẽ cần nhiều mã nguồn và công việc lặp lại hơn tưởng tượng. Để đơn giản hóa việc đó, tôi đã tạo ra một mã nguồn mở tên là react-tree.

Tính năng chính

🌳 API khai báo
Bạn có thể khai báo cây một cách tự nhiên theo phong cách component của React, nên rất dễ xây dựng file explorer hoặc UI cấu trúc phân cấp.

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

📄 Hỗ trợ dữ liệu JSON
Khi dùng component TreeWithJson, bạn có thể render trực tiếp dữ liệu JSON thành cấu trúc cây mà không cần logic mapping riêng.
👉 Demo Tree With JSON

🎨 Khả năng tùy biến mạnh mẽ
Thành phần này được thiết kế để bạn có thể thay đổi UI của từng node theo ý muốn, nên không chỉ là văn bản đơn giản mà còn có thể dễ dàng mở rộng với icon, button, hiển thị trạng thái, v.v.

🔧 Hỗ trợ TypeScript
Có kèm định nghĩa kiểu dựa trên generic nên có thể sử dụng an toàn.

Cài đặt

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

---

Hy vọng nó sẽ hữu ích cho những ai cần triển khai cây trong React.
Mọi phản hồi, báo cáo lỗi và đề xuất tính năng đều rất được hoan nghênh 🙌