[HN Gopher] React Arborist - A full-featured tree component for ...
___________________________________________________________________
React Arborist - A full-featured tree component for React
Author : jameskerr
Score : 73 points
Date : 2022-03-21 20:35 UTC (2 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| juliangamble wrote:
| 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.
| jameskerr wrote:
| Yeah, this is not quite the tree-table component. Unless your
| table only needs one or two columns!
| kabes wrote:
| Antd offers such a react component, as well as atlaskit
|
| https://codesandbox.io/embed/9b6dxf?codemirror=1
|
| https://atlassian.design/components/table-tree/examples
| yuchi wrote:
| Very sad to discover that this is NOT a ready made component to
| display actual trees. What a deceitful name!
|
| 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.
| jameskerr wrote:
| Dang it, I can see how the title was deceptive. This is
| headless component, leaving the markup and styling completely
| up to the user. Many of the tree components I looked at before
| building this didn't let me do exactly what I wanted with the
| style like this one does. However, I was thinking of shipping a
| default "<Item>" component that comes with some default styling
| to get people up and running quickly. I've just made an issue
| for this.
| [deleted]
| citelao wrote:
| I should apologize off-the-bat for not digging in too deeply, but
| how does this handle keyboard and screenreader accessibility?
|
| W3C has some in-depth list of expected keyboard interactions,
| though I'm not sure how complete they are:
|
| https://w3c.github.io/aria-practices/#TreeView
|
| https://w3c.github.io/aria-practices/examples/treeview/treev...
|
| I ask because I've tried to implement a
| [TreeGrid](https://w3c.github.io/aria-practices/#treegrid) myself
| before and... it's a lot of work. I'd love an accessible,
| keyboard-friendly React tree :).
| ctoth wrote:
| Just tried it with NVDA on Windows and it appears that it does
| not handle keyboard accessibility at all and does not
| communicate the relationships between nodes.
| jameskerr wrote:
| Thank you for bringing this up. It's I who apologize for being
| ignorant of these expected keyboard interactions. I'll make an
| issue in the repo to address this.
| eurasiantiger wrote:
| Thank you! Don't sweat not knowing, but without 100%
| accessibility coverage, the component might as well not exist
| -- it could not be used in any publicly funded project in
| EU/USA or any commercial project in the EU, because it would
| be against the law to do so.
| o_____________o wrote:
| There's a lack of performant, beautiful, extensible packages to
| visualize large JSON trees. It'd be nice to see a demo of that.
| jluxenberg wrote:
| This is a great survey of the many ways trees can be used in UX:
| https://medium.com/@hagan.rivers/interaction-design-for-tree...
|
| My favorite is the Tree Table
| bruhvinston wrote:
| It looks very cool. However, I didn't see a license file, so I'm
| reluctant to try it out. Don't want to touch what I can't play
| with, that's what my momma always told me.
| jameskerr wrote:
| Oh sorry, it is MIT. I'll update the repo.
| bruhvinston wrote:
| no need to apologize, I forget it all the time. Rather, I
| should thank you for making it MIT. Now I can use it if I
| want to create an electron app with react that can deal with
| the file system very good.
| jameskerr wrote:
| You're welcome. I created it for an electron app myself. I
| needed a sidebar like you see in VSCode.
___________________________________________________________________
(page generated 2022-03-21 23:00 UTC)