How to Make a Toggle Switch Component in React

all right today we're going to be building this toggle switch right here as you can probably guess it turns on it turns off does everything you need a toggle switch to do maybe you're building an app and you want to have some nice little buttons that people can click on it looks pretty nice so we're going to build that and react enough introduction i'll assume you have a react app right here if you don't just create a sample project with create react app or something like that so what i'm going to do is i'm going to open up visual studio code and start the server all right so this is going to be more of a css tutorial than a react tutorial because honestly the react is pretty simple most of this is just going to be styling but anyway let's create the component right now so we're going to create a new component called toggle.js and we're going to create a react component right here so behind the scenes this toggle component is just going to be a check box because a check box that just uses two states on and off and we don't really need to reinvent the wheel we're just going to use a check box and then just restyle it to look like this so what you're going to want to do is create an input with the type of checkbox of course close this and we're going to import this into our app with import toggle from the toggle component so let's just add this right here and so we if we refresh this right now we now have a check box right here as you can imagine and you probably want to save this to state so let's grab the you state hook from react and then say constant toggled and set toggled is from use state we're going to set the default value as false so let's just save that and now we're gonna pass to this on change so we're going to get the event and then we're going to set the state to checked or not so we can say set toggled is going to be event.target.checked so inside the event so inside the target of the event we're going to have a checked property and it's going to be true or false depending on whether the checkbox is checked or not that makes sense this is not going to work because we have to pass this to this on change or you can just uh grab it from props so let's say on change is going to be equal to unchanged we're just destructing the props from here okay and now this should set the state obviously we can test that out by putting something down here let's say paragraph and let's say the switch is if toggled then say on if not then say off and switch is now off the switch is on okay so that's passing the state correctly and that's basically all you need to do on the react side of things obviously you can also send this to a database you can include this as part of a form but now we're just passing it to state that's all i'm going to show in this example so let's get started with the css so for this project i'm going to be using a library called styled components but you can actually use whatever you want so if you just want to use css and classes go ahead i'm going to be using style components because that's what i use with most projects i have a whole another video on styling in react if you want to see that but you can follow along if you use style components or not but for me i am so let's import styled from styled components and so this switch component is going to be made up of a few different things so first off we're going to want to wrap it with a div and then we're going to actually hide the checks box right here so this is not going to be visible instead we're just going to have a span here and then style the span to actually be the slider for the switch so right now this doesn't look like much but we're going to create some style components let's say constant input wrapper this is going to be the wrapper or the div so let's say style dot div if you haven't used style components before you can just follow along just put class name right here and then add the css we're going to add into this class right here so as if you haven't used style components before but i'm just going to set this to position relative as we're going to have some absolutely positioned elements inside here and we want it to display properly and so we can replace this div with input wrapper same there and now what we're going to do with this input right here we're actually going to hide this completely okay so we're going to completely hide the check box let's say constant input is equal to styled dot input and we're not actually going to write display none as you might expect we're actually going to say position absolute and then completely hide this from the page with this little trick left negative 99999 pixels i don't know why that happened and then we're going to say top the same thing negative a whole bunch of pixels basically we're going to send this input to the shadow realm it's never going to be visible let's change this so it actually appears on the page and you might be saying why don't we just use display none or visibility hidden that's so that we can still tab through the page and select the check box so if you use display none it's not going to be accessible if somebody's using something like a screen reader they're not actually going to be able to select the toggle but we want this to function exactly the same as a checkbox but yeah we're just going to send this input so far off screen that it's never going to be seen ever again and we're just going to replace this with the span right here so the span is going to be all the magic and i don't want to type out all the css actually so let me just paste this in here okay here is the entire css that we need for this span so i'll go over this line by line so you're not confused but let's just replace this right here with slider and then yeah now we have this slider right here so let me actually comment all this out so we can go over things line by line so first we're just displaying it as flex so that it's aligned properly and then we're going to set the width to 50 pixels and the height 25 pixels if you want to make this scalable then you can replace these with some variables and maybe do some math to make it scalable but for me i'm okay with having all of my all of my toggle switches the same width and the same height so i don't really mind and then we're just setting the border radius to some high value just so these are perfectly round edges that's a nice effect of course if you just wanted this to be a square you could delete the border radius we're just sending the background color to some nice gray right here setting the position relative and then we're putting the transition background color 0.2 seconds so we want to change the background color whenever this is switched on so that's what this is going to do it's going to fade it in so it looks nice and then what we're doing here with this pseudo element this is the little button that you see here so save that this is going to be this empty content so it actually displays on the page position absolute so we can position it wherever we want and we want it two pixels away from the top two pixels from the left and a little bit smaller so yeah it doesn't take up the entire height and the border radius again to give it a nice circle i actually don't know why i set this so high it can actually just be the same as the height and it'll display correctly transition 0.2 seconds so that it'll slide over nicely whenever we add that animation and then the background is going to be white and we just add a nice little box shadow here just to make it look nice this is completely optional but you know i like the details here it just makes it look a bit more nice a bit less flat so we're going to leave that in there and as you can see this actually does not do anything at the moment these are just the styles for the unflipped switch okay so in the css we want to check if the input is checked or not as you can remember it's a checkbox so we can actually get that from css for the input whenever it's state is checked and then we don't actually want to style this input as you know we've hidden it completely so we want to get the span that's next to it and with css we can do that with a json sibling right here so this will grab the next span and it'll style it so whenever this is checked it's going to style the span like this so let's change the background color to this nice blue i have here and if you click on it okay and this is not working because i actually made a mistake this should not be a div right here this should be a label so that everything inside this label can be clicked on and it will affect the checkbox right here so if this is just div then the slider has no relation to the input so it's not going to work but if we make the wrapper a label then we can now click this on and off all right so it does change color we also want the button to slide over so we're not done yet but we can see whenever this input is checked take the span and we also want to get the b4 pseudo element and we want to position it so that um we have 25 pixels to the left as you can see it now switches over it's a couple pixels off let's make it 27 pixels and it's now working correctly all right so this now switches on and off that's pretty nice and if you want you can just end the tutorial there you're completely happy it works fine but i wanted to add a little bit more styling just to make it look nice alright so we can actually make the animation a little bit smoother with one trick this is completely optional but i like it so let's say whenever this span is active this is basically when it's being clicked on we want to take the before suit element and say width is actually equal to 28 pixels so you might be asking okay what does this do this just makes it a little bit longer whenever we actually click it so as you can see it has a nice effect whenever you go this way whenever you go this way not as much so let's fix that and the best way i found this is just by using this weird little hack where you calculate 100 percent of the width of this minus two pixels for the little gap on the side and then and then we also want to add the transform here and say translate x is going to be negative 100 and this is kind of a weird little hack but it makes it completely line up and as you can see whenever we click it now has this nice effect where it kind of enlarges a little bit and then goes back it just makes the animation seem a bit more fluid and natural so i like that it just makes it look a bit better one last thing we can do is add a little outline around this whenever it's selected so as you can see whenever you're tabbing through this there's no way to tell when this is actually highlighted so maybe you want to use it with your keyboard and you're not sure if it's highlighted or not the default css style sheets will like put a little outline around the checkbox whenever you uh tab over it so i want to make it more accessible and continue to have that outline so people don't get confused and we can do that by adding a few more styles right here with the box shadow so basically we're saying whenever the input is focused say whenever you tab over it we want to have a small box shadow around the span and you can make this whatever color you want i've just made it a very faint gray and then a very faint blue for whenever it's checked so let's save this and you can see how it looks it's a little bit hard to see but if you zoom in you can see whenever we tab on it has this tab off it has this and it changes to a faint blue whenever we check it so that looks nice and we can actually uh transition the box shadow too so it's a bit more smooth all right now that should fade as well and as you can see yeah it fades on and off so that's just a very small detail but i like adding these small little details it makes it look a lot better so that's how you can add a toggle switch to your application and of course if you want you can add a label next to it you can pass that in as a prop and return a label right here you can probably figure that out for yourself so i'll leave that up to you you can figure out how to style that if you'd like but that's how you create a basic toggle switch in react see you don't need to bring in a bunch of new libraries you have this very nice functional toggle switch with almost no effort

Channel: Eric Murphy

Views: 2,871

Keywords: react, reactjs, react.js, toggle, switch, button, on, off, ios, webapp, css, html, css3, scss, styled components, styled-components, emotion, styling, react styling, style, animation, how to, coding, react tutorial, tutorial, jsx

Id: 1W3mAtAT7os

Length: 14min 27sec (867 seconds)

Published: Mon Jan 18 2021