React Tree Component – componente de árbol para React implementable de forma declarativa

Cuando necesitas implementar una UI de árbol (Tree) en React, manejar directamente el estado y el estilo suele requerir más código y trabajo repetitivo de lo esperado. Para simplificar esto, creé un proyecto open source llamado react-tree.

Características principales

🌳 API declarativa
Puedes declarar el árbol de forma natural con el estilo de componentes de React, lo que facilita crear exploradores de archivos o interfaces jerárquicas.

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

📄 Soporte para datos JSON
Si usas el componente TreeWithJson, puedes renderizar datos JSON directamente como una estructura de árbol sin lógica de mapeo adicional.
👉 Demo de Tree With JSON

🎨 Personalización potente
Está diseñado para que puedas cambiar cada nodo por la UI que quieras, por lo que es fácil extenderlo no solo con texto simple, sino también con íconos, botones e indicadores de estado.

🔧 Soporte para TypeScript
Incluye definiciones de tipos basadas en genéricos para poder usarlo de forma segura.

Instalación

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

---

Espero que esto les sea útil a quienes necesitan implementar árboles en React.
Los comentarios, reportes de bugs y sugerencias de funciones son bienvenidos 🙌