How to make Popup Modal in React JS | React Hooks

hi guys my name is AA welcome to my channel if you are new here or have been watching and enjoying the videos on this channel so far show some love by hitting on the Subscribe button down below today in this video we are going to build a popup model using react and for styling it we'll be using tailin CSS so let me show you what all functionalities it is going to have so we have this button called get the ebook and when the user clicks on it we want the user to enter their email ID and then they can uh click on the download button in order to get the ebook in the machine so let me click on this one and when the user clicks uh here enters the email ID and clicks on this download ebook button the ebooks get downloaded and when the user clicks on this cross icon this model disappears and also after clicking anywhere on the background itself this model disappears so this is what we are going to build so this is one of the most common requirements in any web development project so I thought I'll show you how to create this one so without any further delay let's get started if you know what a popup model is you can skip to the timestamp shown on the screen otherwise let me give you a brief about what a model exactly is so what you're seeing on the screen right now is nothing but a model so in simple terms uh it is nothing but an element that overlays the main screen and it temporarily blocks the user from interacting with the main web page until a task is completed or cancelled so this is what a model is now let's dive into the code and see how it needs to be built so I've already set up a react project called react popup model using V and I've also installed Ain CSS in it if you new to this and don't know how to set up a react project you can refer to my previous video where I have done everything from scratch now let's head on to our app.jsx file let's see what all things we need to build so as we can see here there is a heading and then there is a button called get the ebook and also in the background there is a background color so so inside this div I am going to have an H1 which says popup model and also a button which says get the ebook now let's start styling this since we want these two things in the center so I'm going to use the flex column property but first I'll give it a height of screen so that it spans over the whole height of the screen and I'm going to use the flex column property and I'll give it our items as Center so that it appears in the center of the screen horizontally since I want these two heading as well as this button to have some gapping so I'll give it a gap of six and also I'll give it a background color now let's start styling this H1 so for this H1 since it's a bit bigger I'll give it a text size of 5xl and I'll keep the font as bold also I want the text inside the button as well as this H1 to be in white so instead of giving them individually I'll give it here only and also I'll give it a margin top of around four so that it's not really touching the top of the screen let's save it and see how it is appearing so yeah we can see that this is appearing fine let's start styling this button as well so to this button I'm going to give it a background let's give uh background Indigo of 500 and also I'll give it a px of 4 py of 2 and we want some border radius as well so I'll give it a rounded of L LG and a text of LG let's save it or rather I think uh Viet should look better yeah we can see that now it is appearing fine so the next thing that we need to create is when we click on this button there should be a popup model that should appear so whenever we work in react we usually create separate components whenever we want to create uh more things on the main web page so we are going to go inside the source folder and create a new folder called components and I'll create a new component called model. jsx so I want it to be a functional component so I'm going to use this shortcut called RFC and save this one let's import this one in app. GSX so I'm going to write import model from the components model and I'm going to show it over here and save it so yeah we can see that this model is appearing now instead of having this just this button what we want that this model component should overlay the whole screen so in order to do that I'm going to go within my model. jsx file and I will give it some styling properties so that the background looks blurred so I'll give it a class name I'll first make it fixed and I'll give the inser as zero so that it covers the whole screen and top left right bottom everything is zero and I'll give it a background of black but I want to give it a blurry effect so I'll first use opacity of 30 and there is a property in Tailwind called backdrop blur SM so this is what I'm going to use so that my background look blurred and I'm going to save this let's see how it is appearing yeah we can see that now it is blurred and our text is appearing here now let's create this sort of thing that we want so this type of model so I'm going to remove this model from here and I'll create a div the first thing that we want is a close button that is kept on the top of the box that we want to create so in order to get that icon we are going to use leide react in here so we will search for lde react and first let's install it via npm so I'm going to copy this open my terminal and paste this one okay now once this is installed we can simply use it so let's search for icons and I will search for close yeah this is perfect let's see this in action and I am going to copy this so This is called X in here so first is going to be a button and this will have this icon yeah after this I will create a div inside which we'll have certain headings so first is going to be a H1 which will say download free ebook and then we are going to have a P tag which says want to learn how to crack web development interviews like a pro and then after that we are going to have a form in which we have two things one is an input and second is a button so in the input we will give the type as email I'll give the placeholder as enter your email and I'll make it required so that until the person enters that email ID and then only they can uh download the ebook because I want to store that person's information in my database and then I'll create a button which says download the ebook and before this we also have an icon of download so let's search for that as well yeah this one is what we want so I'll just get this here and I'm going to use it over here and I'll call it download ebook and save it okay let's see how it is appearing so yeah we can see that all of the elements are appearing we just need to style them better so let's style them one by one first we want all these items to be in the center so I'm going to use the flex property so I'll give it a flex justify Center and items as Center so that it appears in the center now we will uh style this outer div I'll give it a margin top of around 10 and I want this button as as well as this div to be one below the other so I'll use the flex column property and also I'll give it some gap of around five and I will keep the text as white now to this button I will increase its size so that it appears to be a bit bigger so I'll give it a size of 30 and to this button I want it to be on the rightmost side of the box that I want to create so I'll give it a place self end propert let's see yeah now we can see that this button is appearing fine we just need to create this boundary or this background around this text so now to this outer div I'm going to give it a background of indigo of 600 and I'll give it some border radius so I'll give it a border radius of XL I'll give the PX as 20 and py as 10 also I've uh I will give it a flex column property and use the gapping property that it provides and I'll keep the items in the center and I'll give the MX as 4 okay after this uh let's style this H1 so for this H1 uh let's make its size a bit bigger so I'll give it a text of 3 XL and font of extra bold to this p uh I'll give it the same text size I think that should be good I'll just make it less bold so I'll give it just bold property and I do not want this whole line to span like to come in the whole line I'll instead give it a Max width property so that this line gets break broken into two so or three maybe so I'll give it a Max width of MD and save this let's see yeah now it's appearing fine we just need to Center align this one so I'll give it a text of Center yeah now it is fine let's style this form as well so to this input I'm going to give it a class name so I'll give it a width of full PX of 4 py of 3 and I want the text that needs to be written inside it to be in black color not in white because I've given white to the outside div so that's why I'm just writing text black additionally in here and I'll give it a border gray of 300 and rounded of MD let's save it yeah now it is appearing better we just need to style this button as well so to this button I'm going to give it a margin top of four and a width of full I'll use my Flex property and give it items Center and justify Center why I'm giving this Flex property is because I want these two elements to appear side by side so that's why I'm using this and I want some Gap in between the icon as well as this text so I'll give it a gap of two and I'll give the PX as 5 py as 3 and I'll give it a font of medium rounded of MD just like above and I'll give the background as black okay so let's save it and see how it is appearing yeah it's appearing perfectly fine fine now we have everything but there is a problem uh we do not want to make it appear all the time we only want to make it appear when we click on the button but since you know that this is a model and we have used some properties that's why it is U overlaying the whole screen and we are not able to access this button so in order to achieve that we'll be using a state variable called show model which will handle the appearance of this model so let me create a state variable I'll call it show model model and set show model uh this I'm going to initially keep its value as false now we want that on click of this button this model should appear so on click we want to change uh the value of this particular variable State variable to true so I'm going to use a call back function in here and call this function called set show model and set it to true and this model should only appear when this show model is true right so here I'm going to just uh use this show model variable and user and so that when this is true only then this appears and save it okay now you can see that our model has disappeared and when I'm clicking on this get the ebook button then only this model is appearing so this is what we wanted to achieve right now now we want to make it disappear as well uh but when I'm clicking anywhere nothing is happening only when I'm clicking on this refresh then only it is disappearing but this is not we want we want that we should enable these cross icon and also the background click so that it disappears as well so how can we do that so for that we will have to create a we'll have to pass in a function in our model so that when the user clicks on this cross button then also our this uh show model value is set to false right so let's pass in a function in our model so I'll call it say on close and this is going to be nothing but a call back function which will set our show model to false right and now since we have uh passed it as a prop we need to import it in our model as well so let me me call this on clu here and on click of this button so I'll add this on click I want to just simply call this on close and save this let's see now if it is working so let me refresh first click on this get the ebook according to what we expect if we click on this cross this should disappear let's click on it fingers crossed yes now it is disappearing now the only thing that is left is when we click anywhere on the background as well this should disappear so we'll be again using our on close but in a different manner we first have to create a reference of this background so for that we'll be using us ref so I'll create a variable I'll call it model ref and use ref over here and I'll create a reference of it here so I'll use ref and use this variable that I've just created now now I will create a onclose function so that when the user clicks on this that or rather I'll call it close model so this close model function should be called now what we are going to write in this so I'll call it close model and there should be an event that it should capture and whenever our model reference. current is equal to e. Target then only we want to call this on close function and save it I hope you are well versed with hooks that we have in react like use ref use effect if you don't know them already you can comment in the comment section down below I'll make a separate video on that so that you have all the basics cleared of react now we will save it and see if it is working so let me refresh click on this now if I click anywhere on the background you can see that it is disappearing and also you can check one thing if I'm clicking anywhere on this model nothing is happening either I'm clicking on this Cross or when we click on the background then only it disappears also if you don't add a prevent default in your onsubmit Handler and then if you write any email and click on this download ebook button then also this popup model disappears so congratulations we have learned how to build a popup model in react and you can see how easy it was also if you feel like there is some functionality additional functionality that you can add in here you can do that also I was recently creating a model for one of my clients where they had this specific requirement uh simply like this wherein they wanted to have a input option wherein the they wanted to have the email of the user and also a download ebook button so on click of this button it should do two things at the same time one it should add the email to the database and also uh after entering the email it should download the ebook on the users machine so I struggled with it a bit but finally figured out the solution so if you want me to make a separate video on that because I did not encounter that problem in this particular video I can make a separate video on how you can download a PDF and uh submit a form simultaneously uh so you can let me know in the comments also you can let me know what type of videos you would like to see on this channel so that's all for this video If you like this video don't forget to hit the like button and And subscribe to this channel for more such videos in future see you in the next [Music] one

Channel: Etisha Garg

Views: 5,941

Keywords: react modal popup on button click, react modal, react modal form tutorial, react modal popup, react modal component, react tutorial, react hooks tutorial, react hooks, tailwind css, tailwind, modal tutorial react, modal in react, modal tutorial, react modal tutorial, react modal form, react tailwind modal, react modal hooks, react modal from scratch, how to make a modal in react, popup modal, popup modal in react js, react, web development, tailwind css react

Id: Gy4G68WoHq4

Length: 17min 42sec (1062 seconds)

Published: Mon Nov 20 2023