Easily Create Accessible React Components with Headless UI

so you don't like the styling of the default HTML select but you're worried that you can't recreate its accessibility using react and you don't want to use the component library because it fostered its own styling on you as well so how about something like headless UI which will give you all the accessibility using its own custom components but those don't bring you any default styling so you can style them in whatever way you like let's take a look but first of all like always you're of course not gonna need to install it using npmi add headless your eyes left react and while you're at it you can also install the class names Library which we're going to use to conditionally render some styling on our components and now what we basically want to do is we've got these options right here with react sweld View and solid we want to be able to select a framework using our own custom select and render all of the options inside of there and to now get started we're of course going to need to create a new file called select.js which is going to contain all of our code and here we can now just go ahead and say export default function and we want to export select of course and select is going to take a few props the first of which being our selected item so basically which item is current currently selected so that we can display it then we want all of our options to be passed so that we can display all of our options separately and lastly we want an on select to be able to externally react to a selection inside of this thing and now we can actually already start by using our list box right here which is basically the version that headlines UI uses for select and the list box actually offers its own first prop already and that is an on change event and this on change is basically what we named as on select so it will react whenever the value changes and pass the value to whatever function is energy and that's going to be our on Cell then next step we can already create the button that is gonna contain our title and that we're going to click to open the drop down and this is of course just going to be a listbox.button and it only contains one thing which is a child in our case it's just going to be the selected item so basically a string and then when we click the button we of course want or options to appear and that's going to be called listbox.options so basically a conditionally rendered component that will contain each option individually and here we can now of course map over all of our options we passed as a prop so options.map and then for each option we will need to render the next element from this Library which is listbox dot option and now we of course need to pass a value for everyone to know that this value maps to this specific option and because our options are just strings so the names of our Frameworks we can just pass the option as a value and then what's really cool is that this thing actually provides you with a child function you can pass so basically we can add a little function right here that will take a few arguments that we can use to conditionally render stuff for example we can check is this thing active so is somebody actively hovering on it is it selected so has somebody already selected or what's really cool is it disabled because you can actually pass a disabled flag to this option as well if you wanted to which we're of course not going to do because it doesn't really help us but you could do that for some conditional rendering if you wanted to and now what we can basically do is we can put this into parentheses and then just tell it what we want to render and in our case we just want to render a div that contains the name of our option again and now what we've basically got is the whole select it doesn't really look all that nice if we now were to render it in here so if we just go ahead and say Here's a select it has an on select which will just sell our framework it has a selected item which is of course also just going to be the framework and lastly it has options which are just our options up here and now if you just were to take a look at it in our browser then we would see that it currently doesn't really look all that nice and that's because no default styling is applied so I'll just apply some default styling now and as you can see it already looks a lot nicer I'm not going to go into the specifics of how I styled this because it's basically just class names but that's not really the purpose of this library to copy my code because it's meant for you to be able to style your own components while still having full compatibility with all the accessibility logic that normally supplied by the selects in whatever component Library you use what I just did is I added option and options and selected Button as class names then created a little CSS file and basically just added some Styles but as you can see there are some option Styles here for active selected and disabled that I didn't apply it and for that we are going to need the classmates library and what we can now do is go to this div that we are rendering right here and just say this now uses class names so the library class name it takes on our default key option and then it can take an object that will basically be used for conditional styling so what we can do is we can now say Okay select it is selected so basically the key to this object is always the style that should be applied and the value is whether or not it should render so when this is truthy then selected will be applied as a new class name and the same of course goes for active and lastly for disabled all the conditional styles are applied and we now just take this out then we can see okay I can now select stuff by basically clicking on it it then becomes spelled and if I highlight it it becomes blue and if you now also want to bring your styling to the next level then maybe check out this video where I'll show you how to use SAS with react which will really improve your development experience while using CSS for styling do check it out and have a good day

Channel: Niklas Ziermann

Views: 709

Keywords: Coding, Programming, HTML, CSS, JS, Tutorial, How to, JavaScript, html5, css3, js, code, coding tutorials, programming, html tutorial, css tutorial, js tutorial, React, react tutorial, niklas ziermann, headless ui, accessible react components, headlessui react, headlessui dropdown, headlessui select, react accessible

Id: XYuELCQ8ZEw

Length: 5min 26sec (326 seconds)

Published: Mon Apr 10 2023