The Ultimate Button with React Aria! Build a React Component Library with Tailwind CSS & Next.js

[@mounis]

Adobe has also created a component library called React Aria Compoemmets. It’s still in beta I guess but you can achieve all of this with a lot less/clean code

[@ethan_mick]

Their library is excellent, but there's not harm in learning how it works and how to build your own components. Their documentation even states that you should drop to a lower level (the hooks) when you need to. This series isn't about just using another component library, it's about building your own.

[@CommunityAllSeasons]

Please do more videos on react-aria. A lot of people have focused on Radix but there's a surprisingly lack of content on react-aria. I think a series on building a component library would be amazing.

[@ethan_mick]

I agree! I like both libraries, but I'll make sure to do some more on React Aria.

[@ronaldpaek]

I checked out the GitHub repo and looked at the the tailwind classes you used, how come you on primary you used data-[hovered] and on secondary you just used the normal hover: pseudo selector also was wondering if you need to actually have them all say [hover=true]? and if [hover] is okay? also do you know if it's hovered=true? cause i was inspecting the html and it seems like it's hovered, thank your content is so helpful!

[@ethan_mick]

Thanks for pointing this out! A few things: 1. I should have used the `data-[hovered=true]` over true for all of the selectors, that was an oversight. 2. Using `hovered=true` is more explicit, it'll only trigger when the state is set to `true`. With how I'm setting them their either true or non-existent, so it works out to be the same. But the `=true` is safer in case in the future it reads `hovered=false`. I've updated the code (github.com/ethanmick/button-advanced/commit/e92025a2d89c1cfb5b2567f9edf968cea236009e) in the latest commit so it should be consistent now.

[@fujisan0388]

I am learning so much from your videos! Thank you.

[@ethan_mick]

Thank you! Thanks for watching another one :)

[@asimalqasmi7316]

I liked the tweeks and their effects Thanks a lot 🌹🌹

[@ethan_mick]

Thank you!

[@madatbay]

After 2 weeks, at last 😮

[@ethan_mick]

Haha, I promise I'll be better!

[@oemeraran8183]

Did you try react-aria-components already? The setup is a lot simpler that way.

[@ronaldpaek]

do you know where in the settings you need to change so that when you save the file it will apply prettier? currently it only works when i manually have i run the prettier write command

[@ethan_mick]

Make sure you have `"editor.formatOnSave": true,` in your VS Code configuration. Sometimes there are conflicting formatters, so you might also need: "[typescriptreact]": { "editor.codeActionsOnSave": { "source.organizeImports": true }, "editor.defaultFormatter": "esbenp.prettier-vscode" }, Change out the language as needed. Let me know if that helps! I use the prettier plugin with VS code.

[@Showmatic]

react aria ❤

[@ethan_mick]

Literally the best ❤️❤️❤️

[@StevenOrtiz-g5r]

hello friend, do you have a tutorial on how to create a saaS from scratch with roles in Next.js

[@ethan_mick]

Hey, I don't have a full tutorial yet, but I'm moving in that direction. What sort of roles are you looking for?

[@grif.n]

When should we use a react aria hook? ie. should we use something like useFocus only if the component needs to do something specific on focus? Or do we always add all hooks to a new component for accessibility purposes anyway? Also - do they have examples or preferred methods of building a menu with menuitems and the accessibility/kbd navigation requirements that comes with that? Thanks :D

[@ethan_mick]

React Aria has a Menu hook and a Menu Component. Here's their example with keyboard navigation too: react-spectrum.adobe.com/react-aria/Menu.html#accessibility In general, I'd only add the hooks when your interactive component needs them. If it doesn't care about the focus state, you don't need to add that hook. That'll keep your code simpler in the long run too.

[@athulgeorge4873]

Great video, however I had some trouble when using your button component with radix ui's modals. The focus classNames of the button are not working when the focus is trapped within the modals children. As in when I am in the modal and try to tab, the focus is not moving to the next element within the modal, however when using a normal button it works fine. Any idea why this may be the case?

[@ethan_mick]

I'm going to investigate this; stay tuned.

[@athulgeorge4873]

@@ethan_mick Hi is there any updates on this, I have looked into it and it seems like using the focusProps from useFocusRing() is causing the problem, however I am not sure how to get around it, while still having the benefits of using useFocusRing().

[@haack79]

Could you pass icons into this button pretty easily, for instance when using next-auth and then making a google sign in button and using google image?

[@ethan_mick]

Yes you can! The takes any ReactNode as it's children so you could do Login with Google and it should work.

[@haack79]

@@ethan_mick Yes, thank you i figured it out, created a signin button that takes your super button and adds nextauth functionality to it! Pretty sweet !

[@MrCone9]

Shadcn ui > all

[@ethan_mick]

I like shadcn/ui a lot (I've used it in some videos), but I find the button to be pretty uninspired. It also doesn't handle any of the edge cases that React Aria handles well. Once you notice these bugs, you can't use anything else.