React Arborist – A full-featured tree component for React

I should apologize off-the-bat for not digging in too deeply, but how does this handle keyboard and screenreader accessibility?<p>W3C has some in-depth list of expected keyboard interactions, though I&#x27;m not sure how complete they are:<p><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#TreeView" rel="nofollow">https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#TreeView</a><p><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;treeview&#x2F;treeview-navigation.html" rel="nofollow">https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;treeview&#x2F;treev...</a><p>I ask because I&#x27;ve tried to implement a [TreeGrid](<a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#treegrid" rel="nofollow">https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#treegrid</a>) myself before and... it&#x27;s a lot of work. I&#x27;d love an accessible, keyboard-friendly React tree :).

This is a great survey of the many ways trees can be used in UX: <a href="https:&#x2F;&#x2F;medium.com&#x2F;@hagan.rivers&#x2F;interaction-design-for-trees-5e915b408ed2" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@hagan.rivers&#x2F;interaction-design-for-tree...</a><p>My favorite is the Tree Table

Good efforts! Here&#x27;s some quick feedback:<p>My first thought - how React Arborist is different from Ant Tree? <a href="https:&#x2F;&#x2F;ant.design&#x2F;components&#x2F;tree&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ant.design&#x2F;components&#x2F;tree&#x2F;</a><p>React Arborist dependencies looks sane <a href="https:&#x2F;&#x2F;github.com&#x2F;brimdata&#x2F;react-arborist&#x2F;blob&#x2F;main&#x2F;packages&#x2F;react-arborist&#x2F;package.json" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;brimdata&#x2F;react-arborist&#x2F;blob&#x2F;main&#x2F;package...</a><p>&quot;memoize-one&quot;: &quot;^6.0.0&quot;, &quot;react-dnd&quot;: &quot;^14.0.3&quot;, &quot;react-dnd-html5-backend&quot;: &quot;^14.0.1&quot;, &quot;react-window&quot;: &quot;^1.8.6&quot;<p>However I was never a fan of react-dnd. Extremely hard to reason about react-dnd-html5-backend and spagetti code once you face edge scenarios.<p>Hard coded css means I need to fork the library<p><a href="https:&#x2F;&#x2F;github.com&#x2F;brimdata&#x2F;react-arborist&#x2F;blob&#x2F;main&#x2F;packages&#x2F;react-arborist&#x2F;src&#x2F;components&#x2F;drop-cursor.tsx" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;brimdata&#x2F;react-arborist&#x2F;blob&#x2F;main&#x2F;package...</a><p><pre><code> const style: CSSProperties = { position: &quot;absolute&quot;, pointerEvents: &quot;none&quot;, top: top - 2 + &quot;px&quot;, left: treeView.indent + left + &quot;px&quot;, right: treeView.indent + &quot;px&quot;, };</code></pre>

It looks very cool. However, I didn&#x27;t see a license file, so I&#x27;m reluctant to try it out. Don&#x27;t want to touch what I can&#x27;t play with, that&#x27;s what my momma always told me.

Very sad to discover that this is NOT a ready made component to display actual trees. What a deceitful name!<p>Jokes apart, nice library. Will try it out sooner or later. May I suggest to not use children as the prop to Ps the Node component? Maybe a more explicit NodeComponent prop would have been better imho.

There&#x27;s a lack of performant, beautiful, extensible packages to visualize large JSON trees. It&#x27;d be nice to see a demo of that.

Great component, thank you for sharing. I was working on a similar component called `react-monaco-tree`, which is waay immature right now. I took `<a href="https:&#x2F;&#x2F;github.com&#x2F;BlueMagnificent&#x2F;monaco-tree" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;BlueMagnificent&#x2F;monaco-tree</a>` as the base. Are there any list of all these &#x27;file-tree&#x27; components for React?

Your company ( brimdata ) looks really good and your work on the Zed client app is impressive.

… I like that it’s a controlled component.

I thought it was going to be a sortable tree-table like MacOS 8. I saw a tree like this in Java Applets in 1994.

Does it miss Delete functionality for folders&#x2F;files (I see rename) or I just dont see it?

Why provide the Node component as a child and not a prop? Seems less intuitive to me.