Build Modal Component With React

[Music] all right guys welcome back in this video we're gonna create model in react application this is the final project if I click the open model the model is come from the top and when I close it's gonna be gone and basically I can click the X button in here and it's gone or I can click outside the model and bam let's create a folder call what I call this react underscore model and let's generate create react app in here by typing in the X create test react as app dot meaning we generate create create react app in this folder which is react model folder so I've already doing this so let's run the app into NPM star should be running in localhost with port 3000 all right so it's done let's see in a browser here we go so what we need to do it first is we need to remove couple file in here you don't need the logos or remove that we don't need tab dot CSS you don't need test file index dot CSS and yeah so that's often the index dot J's file we need to remove the CSS right here safe and let's go to a pledge is I need to close the terminal and I'm gonna remove everything inside a header right here just say h1 say hello from react and I'm going to remove the CSS and the logo so save and now we should see hello from react pretty cool so let's go back in here I'm going to create another folder in source folder right here I'm going to create folder called components and inside the components I'm gonna create another folder which is a model and inside a model you're gonna create a file this model a dirty and we're gonna create the style as well so let's create model dot CSS here we go in model the J's file we need to create functional task component so we need to import react from react we need to export cons we're gonna create function in here so that it goes to arrow function and we need to return the chest X in here so let's just give a h1 and give a hello world okay so let's try to save and I'm going to import the model in here to AB the chess so let's go back to average as we need to import model should be from from that's less components less model slash model okay let's bring in the model inside in here we're gonna remove the hello from react we gonna import right here so let's try to say we should see model now in the browser no model having hello world okay here it is okay so far so good what we are going to do next is we need to create the model and styling that which is the model right here okay so let's go to model Dodge is in here we're gonna remove two h1 and let's create a DVD class to see model des wrapper gonna wrap the model inside this class so let's create another div with class model test header its header and just give a paragraph and as you can see in the final project in here you have paragraph which is welcome to our sites copied ah I'm gonna paste in here wait here we go and let's create a span which is the expert and we're here so that's 2x and I'm gonna create not add class in here set that equals to close this model and SPG n ok so now save and now you should see welcome to our site and X button right there okay so under the model header they're gonna create model content so model - content inside the model content you're gonna create model body which is right here and the footer which is the button right there okay so let's do right here it's a model a - body and down there we're gonna create model a desk footer should be like that wait here it is so inside a model that body we need to create hatch for and just say model and we're gonna create paragraph in here just say lorem set training or something and inside a model footer we are gonna create just a button say button just give a close tax right there let add class name set it equals to b t and s cancel so now safe and this is what we have for now so let's styling that with CSS so let's go back in here i'm gonna import CSS so import dot slash model dot CSS because remember we in the same folder right here okay and we're gonna access the model dot CSS right there basically so let's write safe and i'm going to change the background to rats to make sure everything is work and here we go everything is right cool but we don't need rap of course so what we need to do first is just remove the margin and padding to zero and box-sizing let's set that to put a box like so and for a body we need to using fun family just just sorry Leviticus I'm sorry it's fine so now let's get the model wrapper class so modeled as wrapper we need to give up acro into white and wait I'm going to give a way to Act II person maximal weight I'm gonna set that into to say like hundred thick soul and smoke the center so marching for RAM top and bottom and although for the left and right case and now save and here we go next we're gonna grab the model header and let's scroll it down say model the header yeah you having to create thanks the back run to to say to see to see see wait and basically you start back run and we're gonna change the color into just give a white something like e 1999 and I'm gonna give a padding to one RAM and just give a display to flex because I want to put tax right here into the left and X right here into the right side okay so let's do display flex a line-item Center and justify content to space between wait space between save and here we go okay so far so good let's scroll it down let's make it button right here more P so let's do model - header span and let's change the font size 1.5 RAM and just change the cursor into pointer so here we go so now we need to styling the model content I'm gonna add padding so let's do model content then just keep adding top and bottom to say 1.5 RAM and left and right skip a one Ram save and here we go now we have padding all right cool so let's grab the model body I'm gonna give a margin bottom to one rim save and now we get a margin bottom okay next we're gonna style into title which is the model right there so model body h4 because remember in here we have heads for okay so less styling that we need to change the font size to 1.8 gram and we need to change the color into something like coral so now save and stack look here we go let's try to see what color I'm using let's see right here there we go and I'm going to paste in there so now save and let's take a look here we go okay so let's do what we are going to do next yeah the paragraph so let's styling the paragraph in here so let's go to model body and paragraph skip a space in there and I'm going to change the font size into one Ram and give a back run what I am typing in there we go onto to say ye weights II and just Inc the color to 333 and I'm going to give a padding to one Ram and give a margin top one Ram and write zero bottom two RAM and left zero so here it is so far so good let's fighting the button right there so model - footer and we are gonna get funny let's give a display to block and change the font size into one Ram and give a margin laughs - Auto we need to push to the right side right so now we should see it there in the right side on in here give up heading to 0.5 ram top and bottom and one point a crammed 11 right and I'm gonna change that back run into this color and change the text color into white and I'm gonna remove the border its water set it to none and just remove the outline and just a course or in the pointer save and now we should see button right there pretty awesome okay so what we are going to do next is we need to create open model in here so let's go back to app touch is basically we don't need to class in there the stream of that and in in here we got create button wait button I'm gonna see what's the open model right and skip a class in here something like my class say BTN open model okay so now save and we should see open model with that right they're gonna styling that so let's go back to model dot CSS right here we need to see BTN - open model okay so let's change the big one for the first time let's say - C - C and takes the color in to say save an elastic look wait not changing with the end s open model let's see right here with the end open model open model really open model save and let's see we have the black background and white color so pretty cool and we need to give margin to RAM to give a space to entire the button and we need to wait before padding as well we need to say 0.5 RAM and 1 point a cram for the laughing right save and we need to see the border to none and outline:none and cursor to the pointer so now safe you should see half model in here just make that little bigger the phones ice let's do right here say phones ice with phones ice into one room save an elastic look here we go yes cool the next thing what we are going to do is we need to make this button work when we click that the model is showing up and when we close or close right there the button is the model is gone okay so let's go back to after chess right here we need to create a state okay so let's goes cons just give a show or sad show I said that because to you state wait use really use state and yeah spec sure you import in up here so by default I want to set that into false so in model right here I'm gonna add on click event so I said that equals to when we click that I want to change the satchel into the true okay so now safe and let's go to the model in here we need to voice this we need to send a parameter inside model writer you need to send co-state set that equals to q and we could be given names okay you can give you any name you want basically it doesn't matter and i'm going to create a maybe function in here say cons given name closed model handler said that equals to error function and i'm going to set the show into to false again okay because when we click the closed model handler function we need to hide the model right so just close model handler so that equals to close model handler so saved now in our model we can access the show in here and that cost model in here inside in here I'm gonna say show and closed model handler I'm gonna add in line style in the model wrapper so in here just say spiral set that equals to just give just given opacity to the first time paucity and when the show which is right here is true we need to set the opacity to one and when the show is false we need to set the opacity in to zero so now let's try to save and show what happening here yeah we don't need semicolon right there so save and see now the model is gone when we click that the model is showing up okay but now we cannot close that because we not handle the closed model handler right there so we need to put function inside the close button right here just add in here say unclick when we click the button we need to run the closed model handler so now when we close that I should be gone but I think it should be I just want to just hang change that to close close and I'm going to change the name in here to close I think just make that short let's try that here we go it's working but this thing right here should be work as well so let's go back to model that yes we need to add we're east X right here and it at one click again so one click we have to set it in to close save so now the X button right here is if your work open button open model and close here we go close pretty awesome but as you can see in the final project right here if I click outside the model it should be closing model so let's do in-app purchase right here so in here if show is true we need to create a div and when is false we need to say no ok so if the show is true meaning the model is showing up we need to just add class name in here say class name set it in to back drop and less styling the backdrop in model Dodge s model dot CSS let's go back in here say model test it's modeled as drop and we'll change the back run back run to a row say 3 3 3 but I like to something like maybe the opacity weight yeah maybe something more time and I'm going to give a head to 100% and to say position to weight position to fix and I'm gonna add to say transition to all and one point three second weight all and give away to you know 100 pixel as well so let's try it to save and when we click the open model no nothing happened although that's dropped modal backdrop come on man save and here we go we have already clicked that okay so a less let's reload that okay when we click that should be dark pretty cool so in here when we clicked right here the backdrop class we need to add on click event so you need to unclick set of the coastal closed model handler wait you should be inside active right here say one click so that in equals to close model handler save and now click showing encode so let's see in the final project in here if I click the open model the model that come from the top ok if I close in back to the top again so let's go to model that is in here in style in line style in here we need to transform if show is true we need to add the transform the translate translate into zero few eek if the show is false we need to say translate we translate into minus 100 few week which is the very top okay okay no semicolon which is calmer right there now when we click the save and I click the open model now you cannot see the transition okay because you not add transition in model wrapper so what we can do which is a transition say all 1.3 second or something say is so now save and wait while you come from the left side man let's go back in here yeah we need to why translate why and translate why as well so let's write a safe and I hope that come from stop damn but it's really slow I think just give zero point zero point three second or something close and open model BAM it's so freakin fast basically you can you can play around with this yeah I think zero point five is fine okay open model can close that can open that I can close all right so I think that's it guys I hope you learn something in this video and I'm gonna see you in the next video so bye

Channel: Cand Dev

Views: 15,648

Keywords:

Id: sFCHGba2OEo

Length: 24min 52sec (1492 seconds)

Published: Wed Jun 10 2020