react-arborist

Qué es

react-arborist es una librería de componentes de árbol para React creada por James Kerr. Aporta el comportamiento que suele necesitar una vista de árbol (expandir y colapsar, selección, arrastrar y soltar, renombrado en línea) y deja el estilado en tus manos. Está escrita en TypeScript y se distribuye con licencia MIT.

Para qué sirve

• Construir barras laterales jerárquicas al estilo del explorador de VS Code o del Finder de macOS.
• Renderizar paneles de capas o estructuras anidadas en herramientas de diseño y editores.
• Mostrar árboles de archivos y carpetas con renombrado y reordenación por arrastre.
• Manejar conjuntos de datos grandes gracias a su renderizado virtualizado.

Cuándo usarlo

• Cuando necesitas una vista de árbol completa en React sin reimplementar selección, drag and drop, accesibilidad y navegación por teclado desde cero.
• Resulta ideal si quieres control total sobre el estilado, ya que la librería no impone apariencia y deja el render de cada nodo a tu cargo.
• Si solo necesitas un árbol estático y muy simple, un componente propio puede bastar; alternativas a considerar son rc-tree o los componentes de árbol de bibliotecas como MUI.

Ejemplo

Instalación con npm o yarn:

npm install react-arborist

Uso básico con datos jerárquicos:

import { Tree } from "react-arborist";

const data = [
  { id: "1", name: "Documentos" },
  {
    id: "2",
    name: "Proyectos",
    children: [
      { id: "2a", name: "issue-link" },
      { id: "2b", name: "devlinks" }
    ]
  }
];

function App() {
  return <Tree initialData={data} />;
}

Puntos clave

• Arrastrar y soltar para reordenar y mover nodos entre carpetas.
• Renderizado virtualizado que mantiene el rendimiento con decenas de miles de nodos.
• Soporte de navegación por teclado y atributos ARIA de accesibilidad.
• Modo controlado o no controlado, filtrado y renombrado en línea de los nodos.

Ten en cuenta

La librería no incluye estilos: el aspecto de cada nodo lo defines tú, lo que da flexibilidad pero exige escribir el render y el CSS. Está pensada exclusivamente para React. El proyecto se mantiene activo (última versión v3.10.5) y está publicado bajo licencia MIT.