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

1–10 of 73 posts

Re: React Aria: A headless UI component library

#5

Post by jokull »

deltaci wrote: post #2

can someone explain in layman terms what is headless UI?

"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

Re: React Aria: A headless UI component library

#6

Post by spyke112 »

jokull wrote: post #5
deltaci wrote: post #2

can someone explain in layman terms what is headless UI?

"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?

Re: React Aria: A headless UI component library

#7

Post by fnordsensei »

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?

Some common, but complex, UI components are hard to get right, especially when it comes to accessibility. Combo boxes in particular come to mind.

Re: React Aria: A headless UI component library

#8

Post by skohan »

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 something non-optimal because it comes with the drag-and-drop handling you want. Or you have to build completely from scratch if you want to achieve exactly what you want.

In other words, it would be nice to have slices of UI behavior defined more orthogonally in a way which can be more freely layered, and it seems like this is a step in that direction.

Re: React Aria: A headless UI component library

#9

Post by fastball »

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…

Like this?

https://github.com/tannerlinsley/react-table/

Re: React Aria: A headless UI component library

#10

Post by dTal »

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.

Post reply on HN