React JS Tutorial | Creating a Toggle Switch | BEGINNER FRIENDLY

hey guys so today I'm gonna be building a react switch toggle so let's get started I'm gonna create a directory inside of my source folder called components and then inside of this components folder I'm gonna create a new file I'm gonna call this switch a yes and I'm gonna create one more new file called switch dot CSS so inside of the switch is file I'm going to import react from react and this file is going to contain the component itself so we're gonna do con switch equals yes and then for now we're just going to return back a div that says I am switch we're gonna need to export this so export default switch and then if we go back into our apt ojs we should be able to import switch from components switch and then we should be able to spot this text or the switch component so now we have switch being rendered and it says I am switch so if we go back into switch we can then start building our component we're also going to need to import a switch dot CSS so in poor switch dot CSS and then down here we're gonna stop it in the component so the component is going to be made up of a label and then inside of the label we're gonna have a input field and we're gonna have a span now this isn't what we exactly want currently we just have an input field you can type anything into like hello YouTube so we're gonna change this input field into a different sort of input field by doing type equals checkbox saving and then now we're gonna have a checkbox the nice thing about having a checkbox here is just apply some CSS so this component and then we actually get everything that we need so we're gonna first of all add some class name so we're gonna call the label class name equals switch and then we're gonna add another class name to the span and then this is gonna be called a slider so we're gonna go into our switch dot CSS file now we're gonna start with switch and we're gonna give this a position:relative we're gonna say display:inline-block whip is gonna be 60 pixels and then the height is gonna be 34 pixels so you can visualize what this looks like I'm gonna give it for now just the background color red and you can see now whenever you click anywhere in the red you'll be able to toggle this switch now we don't actually want to see this which we want to build a span which is gonna move left and right so we're gonna hide the input so the way we're gonna do that is I'm gonna remove this background color first so we don't forget we're gonna say don't switch and we're gonna target the input and we're gonna say the opacity is gonna be zero the width is gonna be zero and the high is gonna be zero now you can see that if we add the background color back here red let me click here nothing happens but the input is actually getting switched on and off you just can't see anything so I'm gonna remove the background color again and we're gonna stop for my thing the slider so the slider has gonna have position:absolute cursor is gonna be a pointer so when you're actually on it you get a little little pointer cursor and we're gonna say top:0 left:0 right:0 bottom zero and we're gonna say the background color is gonna be a grade that i've already picked out so now you can see when you hover over it you get the little cursor and we have the gray background we also need to do slide it before and we're gonna say position:absolute again content is gonna be nothing high it's gonna be 26 width just gonna be 26 pixels left it's gonna be four bottom is gonna be four the background color is gonna be white and you'll see now we have this square inside of the main switch now we need to make the slide remove so at the moment when you click on here nothing happens so we're gonna say down here we're gonna say input check and we're gonna select the dot slider before and we're gonna say transform translate egg am I gonna move it twenty six pixels so now when you come up here and you click the slider moves to left and right no it's not very smooth it just snaps left and it snaps right so the way we're gonna fix that is we're gonna come up to the slider before and we're gonna add a we're gonna add a transition 0.4 seconds now you'll see that when you do this is slowly moves over now you might want the background color to change to when you talked it all left and right because of the moment it just stays great so the way you would do this would be you would go to input you would like input checked and then a dot slider and background color and I picked out a nice blue which is gonna be two one nine six F three and then if you click on here now the background color changes you may want the background color to transition and the easiest way I found to do this so far is just to add a transition on here to do so transition is 0.4 s so now back in the switch component we're gonna add in a prop called rounded and we're gonna get that default false and this rounded component is going to tell the CSS rivets around the edges of these so so far this is a square but you may own the prop you may want the component rounded the way we're going to do that is we're going to add a extra key extra class they want equal round it and then when this is true we're gonna get throughout the edges now we don't want to have just hard cut it like this we actually want a way of dynamically making this string probably the best way of doing this is using a package called class names so I've already installed class names how to install it you click Add dependency search for it and then you can find this one here which is by Jade Watson if you need to install this outside of code sandbox you can just do NPM install last names now the way this works is you're going to want to do import some name from class names I've just picked CX because this is a shorthand for class names and it's a lot more convenient than writing out class names a lot of times and then you're going to come into a split two component here you're gonna create a new constand this is going to be called slider CX this is it we're not gonna say CX is equal to we're always going to include slider but we want to say include rounded when rounded so when this when this value is true this slider CX is gonna say slider space around it like this and then when this is false it's gonna look like this now all we have to do is come here and say slider CX and then we have to add the CSS add two more styles we're gonna slide it around it which is gonna have a border radius of 34 pixels and then we're gonna add slider around it before and this is gonna change the shape of the slider itself so border radius 50% so this one here it's going to change the outside gray area and this one here is going to change the white area inside so if we go back to our app door j/s and we've come here to the switch component and then we pass through rounded equals true you'll now see that the component changes to around this switch we can obviously pass through rounded equals false too and then by default we have just the square rounded so back in the switched rjs file we're probably going to want to add some props into this component so we can control the state from outside so the first thing we're gonna add in is a prop called is toggled and then we're gonna add on top so it's toggle is gonna be the value of this input and then on toggle is gonna happen when this input changes so when you toggle on here this is gonna fire and then the color of this background and where it is parlays is gonna be based on where it is toggle this so first of all we're gonna say this is checked we're gonna pass for another prop into the input called check is toggled and then on change on toggle so now when we come back into AB dodge is an import use state from react and then I'm gonna create some state in this component so we're gonna say constant is toggled set is set is toggled okay say you state false so we're gonna have this state here it says toggled and that's gonna be false by default and we're gonna use this set is toggled to actually set between false and true so we're going to pass through the prop siren switch which is is toggled equals is toggled and then we're gonna say on toggle open this up create a function in here and say set is toggled equal to the opposite of the current value so it is toggled now will me clip on here you'll see that on toggle is called set is toggled flips estate and then the component is rear-ended and that's it so if you enjoyed this tutorial let me know in the comments and please like and subscribe I'm gonna be having some more tutorials coming out over the next couple of weeks so please watch out for them

Channel: Will Code For Views

Views: 58,322

Keywords: programming, coding, react, reactjs, beginner, webdevelopment, web development, react tutorial, toggle switch, javascript, js, python, development

Id: bztDMD4HSL0

Length: 10min 49sec (649 seconds)

Published: Sun Jul 05 2020