React Tree Component – คอมโพเนนต์ Tree สำหรับ React ที่สร้างแบบประกาศได้

เมื่อจำเป็นต้องสร้าง UI แบบ Tree ใน React หากต้องจัดการ state และทำ styling เอง มักจะต้องใช้โค้ดและงานซ้ำมากกว่าที่คิด เพื่อทำให้เรื่องนี้ง่ายขึ้น จึงได้สร้างโอเพนซอร์สชื่อ react-tree ขึ้นมา

คุณสมบัติหลัก

🌳 Declarative API
สามารถประกาศโครงสร้าง Tree ได้อย่างเป็นธรรมชาติในรูปแบบคอมโพเนนต์ของ React ทำให้เขียน UI แบบ file explorer หรือโครงสร้างลำดับชั้นได้ง่าย

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

📄 รองรับข้อมูล JSON
หากใช้คอมโพเนนต์ TreeWithJson ก็สามารถเรนเดอร์ข้อมูล JSON เป็นโครงสร้าง Tree ได้โดยตรงโดยไม่ต้องมี logic สำหรับ mapping แยกต่างหาก
👉 Tree With JSON Demo

🎨 ปรับแต่งได้อย่างทรงพลัง
ออกแบบมาให้สามารถเปลี่ยน UI ของแต่ละ node ได้ตามต้องการ จึงขยายจากข้อความธรรมดาไปเป็นไอคอน ปุ่ม หรือการแสดงสถานะต่าง ๆ ได้ง่าย

🔧 รองรับ TypeScript
มี type definition แบบ generic มาให้ จึงใช้งานได้อย่างปลอดภัย

การติดตั้ง

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

เดโม

Basic Tree
Tree With Json

GitHub

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

---

หวังว่าจะเป็นประโยชน์สำหรับผู้ที่ต้องการสร้าง Tree ใน React
ยินดีรับทุกความคิดเห็น รายงานบั๊ก และข้อเสนอฟีเจอร์ 🙌