3 ms·

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 th

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-spectrum.html https://react-spectrum.adobe.com/blog/introducing-react-spec...

gedy 6y ago
Nice work, thanks for sharing.
mdgrech23 6y ago
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?
- devongovett 6y ago
  Each component page has live examples. e.g. here's Button https://react-spectrum.adobe.com/react-spectrum/Button.html https://react-spectrum.adobe.com/react-spectrum/Button.html
- de6u99er 6y ago
  Great work, looks really good and useful! Will try it out tomorrow. Thank you for contributing to open source.
treis 6y ago
Can you give a few sentences of why someone would want to use this?
- devongovett 6y ago
  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 https://codesandbox.io/s/tailwind-react-aria-3ngmw.
rp36 6y ago
Nice work. Questions: 1) What is the minified size of the library 2) Is there a kitchen sink app to review all features together?
- devongovett 6y ago
  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.
  - ponker 6y ago
    You have to pay for this? Where is this on the page?
    - crubier 6y ago
      I think he means to pay the cost in terms of package size, not dollars
flowerlad 6y ago
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.
- devongovett 6y ago
  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! :)
  - flowerlad 6y ago
    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.
    - devongovett 6y ago
      Yep! ComboBox is also in progress/close. ;) https://github.com/adobe/react-spectrum/pull/421 https://github.com/adobe/react-spectrum/pull/421

gedy 6y ago

Nice work, thanks for sharing.

mdgrech23 6y ago

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?

devongovett 6y ago
Each component page has live examples. e.g. here's Button https://react-spectrum.adobe.com/react-spectrum/Button.html https://react-spectrum.adobe.com/react-spectrum/Button.html
de6u99er 6y ago
Great work, looks really good and useful! Will try it out tomorrow. Thank you for contributing to open source.

treis 6y ago

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

devongovett 6y ago
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 https://codesandbox.io/s/tailwind-react-aria-3ngmw.

rp36 6y ago

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

devongovett 6y ago
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.
- ponker 6y ago
  You have to pay for this? Where is this on the page?
  - crubier 6y ago
    I think he means to pay the cost in terms of package size, not dollars

flowerlad 6y ago

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.

devongovett 6y ago
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! :)
- flowerlad 6y ago
  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.
  - devongovett 6y ago
    Yep! ComboBox is also in progress/close. ;) https://github.com/adobe/react-spectrum/pull/421 https://github.com/adobe/react-spectrum/pull/421