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
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.
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.
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!
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.
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
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.
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
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.
@@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 !
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 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().
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.
