51–60 of 73 posts
Earlier quoted context omitted.
`react-table` is headless. I am forced to create my own html structure and am in control of the markup from the start. `headless-ui` provides those components which doesn't give me full control over markup, does it?
It gives you complete control over your markup and styling. Headless UI is designed to handle everything except what the components look like.
IMO the community is much better served by tools that help you identify accessibility gaps during the design phase, experience your application in other usage paradigms, or audit third party packages for accessibility before taking them as dependencies. If you work with designers who love hover triggered tooltips with forms with more tooltips inside them this library cannot fix the fact that you're making a terrible experience. If you want to npm install React-ported Kendo components because you "remember they worked well with jQuery" this library will not make them accessible. Turn voiceover on, turn your screen off, eat your own dog food.
What's worse "accessibility helper libraries" like this often get used as an excuse to say "of course we made this accessible look at all the helpers in the code" but the team never actually audits to see what the experience is like (hint: your Lighthouse accessibility score does not indicate WCAG compliance), and surprise surprise they've incorrectly implemented the helpers in a way that actually degrades the experience. Then they pay my agency a lot of money to hurry up and do it the right way before the NFB lawsuit drops.
I work on Plasmic (plasmic.app), a visual builder for React. With react-aria, we're able to let our users build, say, a Select component visually however they want, and then we just use the hooks to spread the right props to the right elements, and It Just Works. See https://youtu.be/mPHS2zg2a8Y
Headless UI is an exciting space. There's only so far you can go with re-skinning material ui or antd, and no one should be building their own from scratch. These headless libraries give you all the interactivity and accessibility you need for your components, but still give you total freedom over how they look. It is the way!
First and foremost I like hooks libraries and think there should be more of them. That said when looking at their examples this appears to require exactly the same code you would need anyways, but with the additional boilerplate required by the library. Is the goal to add intellisense for people who don't already know how to write accessible front ends? Is the goal to enable me to use a div as a button via hook inste…
Here's a good example of deep thinking and investigative work that goes into react-aria: https://react-spectrum.adobe.com/blog/building-a-combobox.ht...
Earlier quoted context omitted.
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.
What would I use a headless UI on top of my css styling when Chakra UI already follows WAI-ARIA standards for every component and it gives me all the freedom of customizing my css inline?
Some libraries will offer a ton of props to customize different parts of a component - and for some use cases, that is enough. But sometimes it is just easier to structure and style the component however you want, with custom behavior sprinkled in, and then letting a library like react-aria take care of the rest.
Earlier quoted context omitted.
My advice - start with Next.js. Only got started with React myself a year ago (and love it) and to be gone it’s I though, I’ll just stick to nice simple react I bet I don’t need the other stuff. And then, I gradually realised why people use all this other stuff. Next.js solves so many problems!
Not interested in the server-side stuff as I don't use JS/Node on the backend. I see that Next.js is a Node framework, so unless there's a cut down client-side only version that's useful, not sure it'll fit the bill. I was looking at Alpine.js but it's pretty minimal, so I want something more full-featured to compare to. These headless UIs look useful, and some have React and Vue versions.
NextJS (and Gatsby) occupy this space between a static site and a site that is sever rendered. While the site itself is static, during the build process is when all the "server side" stuff happens.
I haven't gotten into react yet, but am looking at a new project where it might be useful. Out of curiosity, are there drop-in compatible replacements for the standard React libraries, like maybe Preact?