MUI Dialog in React JS | create modal popup with form control | React JS - MUI Tutorial

and this is our react GS midi Railway tutorial and in this video I am going to create your own model pop-up using dialog component so before going to the implementation let me show you what are the topics I am going to cover in this video so the first thing is we can create one basic model pop-up there we can include the form control so then we can make this pop-up into full screen for that we have a separate feature that I will explain finally we can customize this pop-up window confirmation palette okay now let me go to my application here the first thing is I am going to create a new component for our model popup I am going to provide the name is model pop-up and we can use the stateless functional component option and here we can include the title mua dialog next we can register this common into our routing side similar to this checkbox we can add as the pop-up finally we can replace this component answer this model purple so next we can create one new menu in our app header so there we can include this link okay now let me click this pop-up link so here only I'm going to implement this model pop-up so here first I am going to have one button so color let me provide primary and this text we can provide as the open pop-up okay and also this variant so our button is fine another next thing is we can Define our pop-up that means our dialog control okay this imported so in this dialog we can include the dialect title we can provide the title is user screen and next we can use the dialog content so inside the dialogue content we can use dialog content text this screen about user details okay and finally we can include dialect actions there we can include the button and other things so here we can have one button and the text to say is close color is error and the variant is same combined okay now we have included some basic elements in our dialog control the next thing is we have to open the pop-up for that I am going to declare a new state variable so in this U State I am going to provide the default value plus false next in our button I'm going to include one on click events function open pop-up and we can Define this function also so here we can set the values for our weapon using this function and this is fine and the next thing is in our dialogue component we have to use this open option okay for that we can use the same variable open and similarly I'm going to create one more function that is for closing our pop-up so in this close time we can mark this value into false and next we can use this close function in our dialogue side so let me save this one so if I'm clicking this button now we are able to see one small pop-up okay and now I am trying to increase the size of this pop-up so in this same dialog control I am going to use full width see now the size is increased so still if you want increase we have one more properties called maximum width so there we have the options like a large medium small Excel and excess okay so first I am going to provide this large see it should be like this and in this medium it is reduced so mostly we can have this small okay so now we have completed our basic pop-up it is just actors like alert okay so once I'm click this is close oh it is not lost so the reason is we have this function right so that actually we have to bind in our and click that's it so in this one click event I have included this function so we can refresh the screen once again so now if I'm trying to click this close the pop-up got closed okay okay this is fine now let me customize this into confirmation alert okay so this is very simple do you want remove this user so already we have this close button similarly I'm going to include one more button so here we can say yes so instead of the error we can provide success and let me remove this one now let me open the pop-up see it is just a confirmation box so if I'm clicking this close it will be closed so in this yes button I have not implemented any function so here we can write on function so in this function itself whatever functionality you want perform that we can include okay okay this is fine and the next thing is I am going to include some form fields in order to we can create one model pop-up with form okay so that is going to be really interesting so first I'm going to change this text user registration okay and let me comment this dialog content text and here I am going to use the stack component so here we can include spacing two and the margin also too here I am going to include my first text field and the label is username and the variant is outlined so let me save this one see one control is included and similarly I am going to include three more controls username password and then email phone number so in this dialect action site we can comment both items I mean both the buttons so instead of that I am going to include one button inside our dialog content okay so after our final text field I just added one button so let me provide the name is submit okay and this color also we can use the primary let me save this one see the response now it is somewhat fine right and the next thing is I am going to include one checkbox also I'm going to include form control label so this one actually I have explained in my last video also next I am going to include this control so inside the control we can have this checkbox and in this label so let me provide okay and the checkbox color we can use the primary so we can see the response so let me Mark this into defaultly checked so let me click this pop-up yeah see this I'm not fine right so finally we have to include the close button also so already we have a full length button so we can include our close button in this right corner so inside our dialect title I am going to use this icon button okay so inside this icon button we can have a close icon so this close icon basically belongs to this material vehicle so anyway let me import it otherwise it will throw the error only this icon material slash so let me save this one see now we have this close icon so next what I'm going to do here I am going to write one style is right and for this close I can we can use this color and in this top right corner we have this close button so and also we can include the event binding okay so already we have done we are just a copy and pasting that's it okay we have clearly done see the pop-up is open so once if I'm clicked it will be closed and increasing the width already I have explained using this Max width option we can pass this medium small something like that the similarly if you want set this pop-up into full screen that also it's possible for that we have to include one directive let me show you full screen that's it is coming in the full screen so this is actually our screen once I'm clicked this open pop-up see it is taking the whole screen so we have this close button so let me close this one so in order to we can create the full screen model popup also so anyway let me remove this one okay or else we can comment this one anyway for the future purpose it is needed so let me comment this one so this is our final output so now we are in the end of the video still if you have any doubt sir clarification regarding this model popup please let me know and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 5,452

Keywords: MUI Tutorial, React js MUI tutorial, material UI in reactjs, how to install material UI in react js, MUI Tutorial for begginers, material UI Introduction in react js, how to use material UI components in reactjs, MUI Textfield, what is MUI, what is MUI Box, nihira techiees, react js for begginers, how to use material UI components, mui dialog, create modal popup in react js using MUI dialog, create form with modal popup, customize dialog popup into confirmation alert

Id: bSvWR1iqXSg

Length: 13min 25sec (805 seconds)

Published: Mon Jun 12 2023