React Tree Component – composant d’arborescence React implémentable de manière déclarative

Lorsqu’il faut implémenter une interface d’arborescence (Tree) dans React, gérer soi-même l’état et le styling demande souvent plus de code et de travail répétitif qu’on ne l’imagine. Pour simplifier cela, j’ai créé un projet open source appelé react-tree.

Caractéristiques principales

🌳 API déclarative
Vous pouvez déclarer naturellement une arborescence à la manière des composants React, ce qui facilite la création d’un explorateur de fichiers ou d’une UI hiérarchique.

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

📄 Prise en charge des données JSON
Avec le composant TreeWithJson, vous pouvez rendre directement des données JSON sous forme d’arborescence, sans logique de mapping supplémentaire.
👉 Démo Tree With JSON

🎨 Personnalisation poussée
Le composant est conçu pour permettre de remplacer l’UI de chaque nœud comme vous le souhaitez, afin d’aller au-delà d’un simple texte et d’ajouter facilement des icônes, boutons, indicateurs d’état, etc.

🔧 Prise en charge de TypeScript
Des définitions de types basées sur les génériques sont incluses pour une utilisation sûre.

Installation

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

Démo

Basic Tree
Tree With Json

GitHub

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

---

J’espère que cela sera utile à celles et ceux qui doivent implémenter une arborescence dans React.
Les retours, signalements de bugs et suggestions de fonctionnalités sont tous les bienvenus 🙌