Create A Custom Styled Toggle Switch In React Tutorial | With Tailwind

hi in this video i'm gonna show you how to create a switch in react something like this uh so yeah let's see how we can build something like this actually i have created a brand new react project using beat so i'm going to create a new folder called component and then inside that i'm going to create a switch component all right this is the basic structure of a component and then this is the base div uh right i'm gonna actually i have already installed tailwind it's a styling thing uh yeah i'm gonna call clock i'm gonna say class name and then uh the base div is gonna be flicks and inside of that i'm gonna write a span but let's uh let's say the width is gonna be 80 pixels that means w that's 20. this is how we write in uh tailwind width is going to be 20 and then height is going to be 40 pixel right let's put a background let's say gray 700 or 600 maybe uh we have to import this in app.js so that we can see what's going on and import it import from here and then render it here right we should see something like this right okay uh and then we have to give some styling to this as well last name it is going to be the same as the parent div then the width is going to be the same and the background color is going to be let's say a white but this is the basic switch switch layout and then i'm going to margin up margin a bit but we can see it probably say 10 right let's round it round full and then round full here as well put this both around the inside of inside of the switch and then the outer switch outer div as well everything is rounded so it looks nice right looks nice and then let's uh let's create a state let's say create a state this is how you create a state cons and then set sorry uh is selected then set is selected and then use state the default value is going to be false we have to import the use state from here use it is a hook to write states all right this is the state well i'm what i have to do is what i need to do is when you click some click this knob it should say true and when you click it again it should say false so basically totally uh yeah and uh to conditionally add classes and remove classes we have a library called class names i'm gonna add that to my project and add class names and import it but i've imported it and then i'm gonna use it here sorry here we can call class names and then put the previous classes inside of that should look the same doesn't do anything and we can conditionally render conditionally add this at the separate class when this select is true now to do that we'll have to write the class name here let's say background color green with 600 if the select is true where this is this is the previous classes and then an object this is the object and this is the attribute name and then the true or false statement it's a boolean so when it's true this is added to this lit this class set this class is added when it's true so when this is false this class gets removed right so yeah let's let's check this this is false right now let's say true see this gets changed the color gets changed by the way i wanted to add the green color to the parent div so i need to do the same thing here as well remove this and then all class names and then put the previous classes and then another object this object is gonna be the same as this one and then i can remove this object from here right when you say true now the background should be green right it's 500 here that looks better i think let's say false now i need to send this uh thing to the end of it end of the parent div when this is true so i can do this by saying let's let's put that object here and then margin left side of string margin left let's say 20 pixels for now just just to see if it's working is selected this is the state when it's true it's true it changes right i need to move this 40 pixel sizing say 10 yes right let's uh let's change this selecting a selected state uh when you click the switch let's do that set and on click listener sorry on click listener on the parent table and then set the is selected say state to the negation of this or an opposite opposite of this boolean value like this let's say for example if this is true already when you click this set the state opposite of this state uh that means when it is true when you click this one this even gets executed and then this sets the new value to the force of this current value right see it works when you click this it changes the state so if you want to make it smooth a bit we can add transition all which makes it a little smoother make it a little bit more smooth maybe duration 500 milliseconds right smooth enough let's add a duration transition duration for this pair on the vessel so that the background color is nicely faded as well let's try that right it works let's put a little background to this knob as well sorry uh not the background a shadow large shadow maybe maybe an extra large right the switch is ready so this is how you create a switch in react you can play around with the colors and styling and everything uh yeah that's pretty much it if you like this kind of videos uh like the video and then subscribe to the channel and if you think anything needs to be improved like in this video or something let me know in the comments and yeah see you in another video bye

Channel: Nismi Digital

Views: 5,906

Keywords: react, tutorial, custom styling, react js, react.js, coding, tailwind, tailwind css, styling, custom css, switch, toggle switch

Id: MN-46MWnIvw

Length: 5min 58sec (358 seconds)

Published: Thu Jun 09 2022