Why You Should Use React Aria Components...
Vložit
- čas přidán 6. 07. 2024
- Discover the power of React Aria Components, a headless UI library that ensures accessibility, customization, and a consistent user experience across devices. Lets talk about all the details that React Aria Components implements for you and why you want a headless UI library. See how to style and integrate these components into your projects with ease.
React Aria Components: react-spectrum.adobe.com/reac...
Builder.io Button Blog: www.builder.io/blog/buttons
Devon Govett X: x.com/devongovett/status/1738...
Accessibility Docs: react-spectrum.adobe.com/reac...
JollyUI: jollycod.ing/ui
DraftUI: draft-ui.com/
BaseLayer: www.baselayer.dev/
React Aria Storybooks: react-spectrum.adobe.com/reac...
3 Part Button Blog: react-spectrum.adobe.com/blog...
-------
🐦 Twitter (X): jollycod.ing/x
🤓 Personal Site: jollycod.ing/me
💻 GitHub: jollycod.ing/git
JollyUI: jollycod.ing/ui
0:00 Intro
0:55 Quick Demo
1:53 Accessibility
7:01 Great, Consistent UX
14:27 Easy Styling
22:57 Internationalisation
25:07 Advanced Customisation
29:30 Outro
#ReactAria #WebDevelopment #HeadlessUILibrary #Accessibility #FrontEndDevelopment
I really love the way you talk and explain. To the point, but not too fast. Very clear.
The topics are more advanced compared to 90% of dev youtubers, who seem to focus on very beginners almost exclusively. I like that you are not doing this.
One of the reasons I didn't want to use react-aria where changes like `onClick` to `onPress`. But your explanation made so much sense.
Keep it up dude, you are on the right track!
This is the best react-aria-components video I watched. Your examples for each features are absolutely wonderful. I will give a try your lib. Thank you.
Excellent work man, thank you for making this!
Been building out a design system using the react-aria components with the tailwind-variants library and your codebase is a really great reference for how to do this type of thing in a really clean and modular manner. Plus you did some really great work with the custom theming functionality. Starred the repo and will definitively be sharing with some friends!
Thanks for sharing James
Thanks for sharing. Please make more tuts about react aria. We need more 😊
Soooo interesting ! thanks James !!
I'm a begginer dev and, thanks to you, I created my own blog thanks to your react/velite/mdx tutorial 😍 I really love it !
Awesome to hear about the blog, thanks for the kind words!
wow, it is so much amazing than i expected. radix should implement this more. i really like the functional className concept, very nice DX.
I love React Aria's API. Simple and intuitive.
Wow, I’ll try ❤
great video
great video, thanks! i was sold when you showed classNames styling the component - it annoys me so much in shadcn that a className won't override a variant - and you can't even move the className outside of the variant function (inside the cn function) to force it to.
how does react-aria deal with styling table rows or other nested components? are they always flat(right term?) so you can add styles?
also, how have you only got 4k followers?
Which monitor is you are using? Is that 4k? The font rendering is so smooth.
Monitor is a standard LG 1440p one. Its probably because I have scaling set to 175% when I record, so everything is larger and more readable on mobile devices.
Beautiful api. Shadcn gets the press but I find it very convoluted, definitely skill issues 😆
Most of the components of Shadcn/ui are built on top of RadixUI (headless component library), which has the same advantagens as react-aria and respects accessibility as well.
Radix is a great library and I have used that for a while. Devon the creator mentioned that the biggest difference between React Aria and most other libraries in regards to accessibility is support for mobile screen readers. The ARIA Practices Guide doesn't cover those, so any library that purely bases their implementation on it will miss some important functionality.
This combined with the features like renderProps, means I prefer React Aria Components now. But you cant go wrong with either.
What's the extension which folds the props into a "..." ?
Its just the className prop, called Tailwind Fold (marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold )
Useful when I want nice styled demos where the focus is not on styling.
Thank you for a video , (how did you centered this div hhhh kidding 😂)
Will Adobe own anything we make with it? These are things we must know with Adobe doing what they are currently doing in the Year Of Our Lord Two Thousand and Twenty Four.
It's Apache 2.0 licence, which allows private use, public use and commercial use. You just need to make your project also Apache 2.0 licenced
flowbite-react
Nah
I have used their non JS components for Tailwind examples before, not had too much interest in their JS stuff mainly because when I was looking at it it did not have many components. Seems quite built out now.
@@dkr91 explain sir , you can't just go leaving a "NAH"
Nice library but f*ck Adobe.