React Tree Component – React के लिए declarative तरीके से बनाया जा सकने वाला tree component

React में जब tree UI implement करना होता है, तो state management और styling को सीधे संभालते हुए उम्मीद से ज़्यादा code और दोहराए जाने वाले काम की ज़रूरत पड़ती है। इसे सरल बनाने के लिए मैंने react-tree नाम का एक open source बनाया है。

मुख्य विशेषताएँ

🌳 Declarative API
React component तरीके से tree को स्वाभाविक रूप से declare किया जा सकता है, इसलिए file explorer या hierarchical UI लिखना आसान हो जाता है।

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

📄 JSON data support
TreeWithJson component का उपयोग करने पर बिना किसी अलग mapping logic के JSON data को उसी रूप में tree structure में render किया जा सकता है।
👉 Tree With JSON Demo

🎨 शक्तिशाली customization
इसे इस तरह डिजाइन किया गया है कि हर node को मनचाहे UI में बदला जा सके, इसलिए सिर्फ plain text ही नहीं, बल्कि icon, button, status indicator आदि को भी आसानी से extend किया जा सकता है।

🔧 TypeScript support
इसमें generic-आधारित type definitions शामिल हैं, इसलिए इसे सुरक्षित तरीके से इस्तेमाल किया जा सकता है।

इंस्टॉलेशन

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

---

उम्मीद है कि React में tree implement करने वालों के लिए यह मददगार होगा।
Feedback, bug report और feature suggestion सभी का स्वागत है 🙌