Hacker News Reader

Comment by devongovett | Hacker News Reader

hey everyone. I work on React Spectrum. Happy to answer any questions. :)

I'd also point to our introductory post where we discuss the architecture. I think the most interesting thing is that you can reuse most of the behavior, accessibility, etc. without our design in your own component library using our hooks. https://react-spectrum.adobe.com/blog/introducing-react-spec...

View on HN

Hello - I may be blind but I don't see any examples of what the components look like on actual screen. Is there a storybook or something?

Each component page has live examples. e.g. here's Button https://react-spectrum.adobe.com/react-spectrum/Button.html

Great work, looks really good and useful! Will try it out tomorrow. Thank you for contributing to open source.

Overall this looks nicely architected. However I don't see any data-intensive controls. Adobe being a graphics company may not need such controls, and this will probably be the weak point of this lib. If you want to see what data intensive controls take a look at Azure Portal. Hope to see such controls in a future version of this lib.

Adobe actually has a pretty big marketing business as well, along with applications like file managers (think web based versions of Finder or Windows Explorer). Tables are one of our most complex components, and are quite commonly used in some of our products. Our table implementation is a work in progress right now. It supports keyboard navigation, sections, sticky columns, multiple selection, infinite loading, drag and drop, etc. Should be available in a month or so. We'll also support other collections like trees/grids/column views in the future, and possibly some charting stuff as well. Lots still left to build! :)

That's good to hear! Here's another very important control: ComboBox. Data-intensive applications need powerful and flexible ComboBox with options such as dynamically supplying suggestions, ability to select multiple items (i.e., multi-select Combo which has checkboxes next to each option displayed in the dropdown), ability to search for an option in the dropdown (so the dropdown has a searchbox at the top) and so on.

Yep! ComboBox is also in progress/close. ;) https://github.com/adobe/react-spectrum/pull/421

Nice work, thanks for sharing.

Can you give a few sentences of why someone would want to use this?

I think it's more likely that people will want to use the React Aria and React Stately libraries that underpin this than React Spectrum itself, unless you're wanting to match the Adobe look and feel for some reason (e.g. plugin developers). React Aria and React Stately provide Hooks that give you a lot of the behavior, accessibility, internationalization, etc. features out of the box, but let you completely customize the styling and rendering in your own components. Here's an example I made of using the hooks with Tailwind CSS to build completely custom components with full accessibility in a very small amount of code: https://codesandbox.io/s/tailwind-react-aria-3ngmw.

Nice work. Questions: 1) What is the minified size of the library 2) Is there a kitchen sink app to review all features together?

1. Depends on how many components you use! Each component is a separate package, so you pay for only what you use. We also offer a monopackage containing all components, but it is fully tree shakeable so it should be equivalent to using the individual packages if you have a good build setup.

2. We're working on building some example apps, but for now, the docs are the best example. You can also try out the storybook that we use for development if you clone the repo locally.

You have to pay for this? Where is this on the page?

I think he means to pay the cost in terms of package size, not dollars

Reply on news.ycombinator.com