React Tree Component – componente de árvore para React com implementação declarativa

Quando você precisa implementar uma UI de árvore (Tree) no React, lidar manualmente com gerenciamento de estado e estilização costuma exigir mais código e trabalho repetitivo do que parece. Para simplificar isso, criei um projeto open source chamado react-tree.

Principais recursos

🌳 API declarativa
Você pode declarar a árvore de forma natural usando o modelo de componentes do React, o que facilita a criação de exploradores de arquivos ou UIs hierárquicas.

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

📄 Suporte a dados JSON
Com o componente TreeWithJson, é possível renderizar dados JSON diretamente em uma estrutura de árvore sem lógica de mapeamento adicional.
👉 Demo do Tree With JSON

🎨 Personalização poderosa
O componente foi projetado para permitir que cada nó seja transformado na UI que você quiser, facilitando a expansão para ícones, botões, indicadores de status e muito mais, em vez de apenas texto simples.

🔧 Suporte a TypeScript
Inclui definições de tipos baseadas em genéricos para uso seguro.

Instalação

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 isso ajude quem precisa implementar árvores no React.
Feedback, relatos de bugs e sugestões de funcionalidades são muito bem-vindos 🙌