React Popup Modal With Tailwind CSS

what's up guys this is neetus and welcome back to another video i have been absent from this youtube for over two weeks now but finally i am back but i just want to say sorry to those people who are sending me dms but i haven't responded to those dm's and that is not because i was arrogant that is because i didn't have time to respond to those dms and i think you guys will understand that now let's directly jump into the today's topic today we will see how we can create models inside react.js basically the reason for this video is few weeks back i got a dm where somebody was asking me how he can implement model inside his project like he wanted to click some button and open some model inside his react project and i told him the solution but he was a little confused so here is the solution i think this video will help a lot of you like how we can implement model and for this project i'm going to use a react and they tell me css if you guys don't know how to say to tell me in css then you can go to this tell me css.com click on this docs and if you come down here you will see this framework guide and here you can see the guide for this create react app simply you can first create your react project with this npx create react app and you can move to that folder or the project folder and then you just need to run these two commands inside this directory or the directory of your project and then if you include these things inside this tailwind config file and if you include this inside your index.css then you are ready to go and that's it that's how we can set up this tell me css insider react project once you do that you will have your react app with delve in css and then we can add these class names and that's it so i already have gone through all of those steps and i have running this project inside my browser and that's what i have right now here i have a lot of text and here i have this button called open model and currently nothing will happen if i click here but we will see how we can create model and open this model and close the model and do a lot of things here but if you don't want to write all of the class names to get this then here i have the gist you can go to this link i will provide it's a link in the description box below you can simply copy this app.jsx and you will get the same result if you paste it inside your editor by the way if you guys don't know what the statement css is then this is the tool which will help you to choose these class names and apply these to your elements and it will take care of all of the styling we don't have to write our custom css inside our index.css insert in my thinking this television css is the greatest thing that happened to the css in the history of css okay first let me explain what is happening here here we have this div with this background color and i have changed the opacity to 30 percent and i have this d where i'm using this max with 3 xl which will give us this width of 48 frame and i'm using this margin x auto to take everything in the center and here i have this d with the stick center to make this button in the center and here you can see we have a lot of other classes to make this button a little beautiful and then here we have this paragraph tag with this class text lg which will give us this result in this text size and line height and here i have all of these fake text that's it and now here we are going to add our model and for the model if you are already familiar with react native and model inside react native then we are going to recreate that same kind of thing here inside this react first of all what i will do i'll create this my model dot gsx this will be our component now here i have this functional component and first of all i'll just save this file and inside this app.jsx what i will do i will go all the way down to here and what i will do i will import this my model and i'll save this file now if i save this file then we will have this my model here at the bottom let me zoom in a bit as you can see but we don't want this model here at the bottom we want this model on the top of everything whenever we click on this button right so for that what we can do here inside this my model i'm going to first add some class names and here let's add this class name called fixed which will give us this position fixed once we have this position fixed what we want to do we want to give it this top zero left zero right and bottom zero so that we can render this model at the top of everything but for that inside television css we have this class called inset in set 0 and now if i save this then you will see now we have this my model at the top but if i go to this button and try to click on this button nothing will happen and that is because currently we are rendering this model at the top of everything now let me prove that as well now if we go inside here and inside this class name if i add this bg black and here if i save this file then you will see now here we have all of these black thing but i don't want to render all of the black thing here so for that inside television css we have this bg opacity and i'm going to use this 30 here and also here we have this another class called back drop blur and i'm going to use this small one now if i save this you will see now we will have this kind of region so this will be our model but i want to render everything in the center so we already know that for that we can use flexbox so here we can add this flex justify center and item center which will give us this display flex justify content center and align item center and now with these classes we will have this at the center but instead of this my model here i want to render this d with the class name bg white and inside here i render this my model as you can see here we have our my model and we have our white background now let's style it a little bit for that i'll use this padding of two i want the surrounded corner which will give us this border radius 0.25 ram and now if i save this that's how it looks but currently inside this app if i reload this page this model will be visible but we don't want this we want to open this model once we click on that button so for that what i'm going to do i'm going to accept this visible this will be prop and inside here we'll check if the there is no visible we are going to return null otherwise we will return this d which will be our model now we have to pass this visible so for that i'm going to go inside this app.gsx and here now if i set this visible only then it will be visible now if i save this here we will have our model but if i remove this visible from here we will not have that model so for this what i will do i will create this state so now here i have this state called so my model and i'm using this huge state hook and setting the value to this false by default and here what i'm going to do i'm going to pass this visible which will be so my model and now we can use this method and change the value of this state so i'm going to do that inside this button so on click save so my model and we are going to set this to true and now if i save this and now if i click on this button then we'll have this model open but now also we want the way to close this model okay so for that inside here or what i will do i'll directly pass this on close so this will be another prop which we are going to pass to this my model and inside this on close what i will do i will create this new function called handle on close well we are going to just change the value of this model or so my model to false so now here we can simply copy this function and paste it here and change the value of this to false okay now what we just did we are passing this new prop called on close and here we have this handle on close where we are reversing the thing which we are doing here we are simply changing the value to false okay now i'm going to save this file let's say go to this one and here we can destructure that on close and for now what i will do inside here let me add this paragraph tag where i'll add this and here i'm going to add another paragraph tag or let's say use this button here and here i will use this x which will be our x icon here also you can use sbg icon and all but i'm going to use this on click here just for the demonstration and now if i save this and if i click on this x it will close this model but for the better user experience what i will do i will add a functionality whenever we click on this backdrop we want to close this model okay so for that inside this div i'm going to add this on click because this is the wrapper of everything this is this black part here so for that here i'm going to create this handle on close now whenever we click on this div i want to fire this function called handle on close where we are going to call this function called on close like this okay now i'm going to remove this button from here and i'll save this file for now and now here we have our model but here is a theme now if i click on this backdrop it will close this model but it will close this model also if i click inside this white part as you can see right if i click on this my model it will close this model now you may say that what is the problem right we want to close this model and if we click anywhere here it will close this model but that's not the case let me show you why for that what i will do i'll go to this model and instead of all these what i'm going to do i'm going to add this form here like this now if you want to see where from where i got this form or this code then you can go to this gist okay inside is my model and you can copy from here to here and you will get something like this now if i save this file you will get something like this and that's a zoomed out version of this one now here we have the sign in form and now i want to fill my form and if i click anywhere inside this model or anywhere inside this form it will close this model so that's what we don't want and that is happening because of the event bubbling now if you guys don't know what event bubbling is then it doesn't matter wherever we click that click will bubble all the way through its parent so whenever we click on inside these things or inside these elements this on click or this handle on close will be fired so for that what we are going to do we are going to prevent this thing so for that we can add this id where you can add the id that you like i'm going to use this container now whenever we use this on click then we will get this event here now inside this event we will have the target and inside this target will have the id as well so here if you check for this id container only then we want to call this on close function okay now if the targeted element have the id of container then we want to call this on close that's it okay now i'm going to save this file and if i click inside here i can type everything like this nothing will be happened but if i click outside of this container or this white part it will close this model and that's what we want so that's how we can create our model inside react and you may think like why we are doing all these things while we are creating our model we can simply create our model and we can append inside our html then that's not going to happen inside react inside react you can only render one root element which will be d and which will have this id root or also you can change this id and i'm not going to go inside that but yeah you cannot render another div so that's the thing which you need to consider and that's how we can create our model also if you want to what you can do if you have multiple models inside your app you can take this div out and you can create another thing called model container and inside a single model container you can render other models or the other contents that you like and if you do that you will have a single model container where you will handle on clues and all of these things in a single place and you don't need to worry about all these things every time so that's it that's how we can create our model and if you want to see how we can create advanced kind of model and how we can work with advanced model like for example how we can use this model and sign in and after signing in successfully we are going to close this model on its own you can do all those kind of things which we have already covered in my this very large course which is a merge stack bootcamp where we have a lot of advanced things like this model and a lot of other things using react album css node.js a lot of other things because this is a bootcamp where we have more than 40 hours of content now if you want to check this out i'll leave its link in the description box below but for now that's it that's how we can create our model so as always i hope you like this video and learn something new if this is the case then don't forget hit that like button subscribe if you haven't already and i'll see you guys in my next video

Channel: Full Stack Niraj

Views: 32,090

Keywords: react modal popup on button click, react modal component, react modal form, react modal, react tailwind modal, react and tailwind css, react and tailwind

Id: kcpe4kqZaKg

Length: 15min 44sec (944 seconds)

Published: Tue May 17 2022