Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Aria: A headless UI component library

react-spectrum.adobe.com

Post reply on HN
Print view View original

11–20 of 73 posts

Re: React Aria: A headless UI component library

#11

Post by ojkelly »

spyke112 wrote: post #6
jokull wrote: post #5

Earlier quoted context omitted.

"Bring your own UI". You get the behavior from the library but they are completely unstyled or without the component layer where the styles live. Other libraries include Radix and HeadlessUI. Here's a presentation from one of the Radix library authors about how to build dropdowns in React, it serves as a good explainer about what goes into a headless UI library component. https://www.youtube.com/watch?v=lY-RQjWeweo

Why not just use default html elements?

There’s a lot of UI elements that are not in the set of html elements. Sometimes you need different behaviours.

I think it’s still best to build on the native elements first though.

Re: React Aria: A headless UI component library

#12

Post by deergomoo »

spyke112 wrote: post #6
jokull wrote: post #5

Earlier quoted context omitted.

"Bring your own UI". You get the behavior from the library but they are completely unstyled or without the component layer where the styles live. Other libraries include Radix and HeadlessUI. Here's a presentation from one of the Radix library authors about how to build dropdowns in React, it serves as a good explainer about what goes into a headless UI library component. https://www.youtube.com/watch?v=lY-RQjWeweo

Why not just use default html elements?

They’re pretty lacking. is a great example: no searching/filtering, no ability to have styled/multiline text in s, nor anything that’s not plain text (so no SVG iconography for example).

People constantly have to reinvent the wheel to offer fairly basic functionality, so it’s good that there are libraries to handle the behaviour and accessibility side well while supporting whatever visual styles you want to make.

Re: React Aria: A headless UI component library

#14

Post by skohan »

dTal wrote: post #10
skohan wrote: post #8

It's a nice idea. I've recently been working with React more, and one of the things which can be frustrating is that it's often hard to find the right level of composability if you want to combine ready-made components. I.e. if you are looking for something like a spreadsheet as a component, maybe you find one with the correct behaviors, but it handles animations in a way you don't like. Or maybe you have to pick som…

From the developer perspective, I can certainly relate. From the user perspective, yet another widget with subtly different behaviour is very annoying. I'd much rather you add drag and drop handling to the existing widget so that everyone benefits and UIs remain consistent.

Yeah I get this argument for native apps, but does it really make sense in the context of a React app? If I'm combining components from different authors, what's more important to the user is consistency between components in my application, not consistency for an individual component across different unrelated sites.

Re: React Aria: A headless UI component library

#16

Post by nsonha »

deltaci wrote: post #2

can someone explain in layman terms what is headless UI?

It's not a thing, this is just a term made up on the spot by the author of this article to describe a component library that has no built-in style.

"What does it even do then" you ask. It implements basic accessibility patterns so you only deal with high level UI elements and not have to worry about having the correct `role-` or `aria-` attributes. That and composite elements such as tabs or modals

Why no style? Most product teams have a design system and they actually overwrite the style of component libraries anyway. So better to have component libraries without style, less bloat.

Re: React Aria: A headless UI component library

#18

Post by gherkinnn »

endisneigh wrote: post #17

The never ending battle between customizability and uniqueness. If there were a standard library (adopted by all browsers) similar to the default look of iOS and Android apps, but in return you couldn't customize the look, would y'all go with that?

Just that it won't look the same across different browsers and platforms. They will also work differently, have slightly different options, and not every element will be available everywhere anyway.

Give me the primitives any day.

Re: React Aria: A headless UI component library

#19

Post by endisneigh »

gherkinnn wrote: post #18
endisneigh wrote: post #17

The never ending battle between customizability and uniqueness. If there were a standard library (adopted by all browsers) similar to the default look of iOS and Android apps, but in return you couldn't customize the look, would y'all go with that?

Just that it won't look the same across different browsers and platforms. They will also work differently, have slightly different options, and not every element will be available everywhere anyway. Give me the primitives any day.

The hypothetical is explicitly that if it did look and behave the same as well as having the same elements.
Post reply on HN