Create a modal with React (Pop-up)

hey everybody i'm enzo and today we are going to build a simple react model okay it's pretty simple to do so we can start right now so here we are in vs code in a simple create react app i just have an app.gs right there i'm importing my model and i have a components folder with a model folder and i've done all the css for you you can find the source code in description and you can reuse it as you want and we are going to focus on the gs part so the react part okay so in our component right there i'm just returning react fragments and i will use use state for the state and i have my css right there so for the state it will be a simple toggle actually so const model and sets model yep and we will start at user state false because when we start we don't want to see the model only when we click on the button so the button is right there with the class of btn model okay and inside i will just write open okay and when i click on it on click i want to run a function i want to run const toggle model okay and when i click on the button i want to toggle the state how we toggle the state with react we are just using set model okay this and we are changing the state with exclamation mark state so if the state if it is false it will go to true and if it's true it will go to false okay it's a really simple and basic uh toggle okay so we do have our button but we don't have actually the model itself so we can go just there and write it so a div with the class name of model and inside it i want to have an overlay it's pretty important okay it's the overlay uh usually there is a overlay it's not mandatory but usually there is a hoverly so i am just showing you how you can do that and i will just finish the model and i will explain the css so after that i want the content okay so modal content inside it i will just write hello model model model and inside that i will put some text lorem 50 and yes i do have my text right there and i want to close it with a button so i can stay in my model content and i will add a button and inside it i will just write close and i want to add their class name of clause btn a clause model clause model and an on click equal toggle model yeah that's nice okay that's great here is the button on the top right so usually this is a cross or a red cross or whatever so you can put some animation or whatever you want this is just to have a simple button okay so now with the model with the that component we need basically two features we need to close it when we click on the overlay and when we click on the button okay so this is why i've put right there toggle model on the button and i will put it to on the overlay how i did the overlay it's just right there on the css so as you see the overlay is just taking the full width and height and it's like pinned at the top left right bottom so it's it's really taking all the space behind my model so this is perfect when i will click on it it will close everything and yeah this is pretty much it okay so the last thing we need to do is to render the model conditionally so we need to open curly braces and inside it i will use the short circuit operator so if model is true double sign and i will just return my model right there so ctrl x and i will just copy it right there so this is a short circuit operator it's not very common but it's very useful it's like a minified version of the ternary operator so it means that if model is true i will return my model and if it's not i will not return i will return nothing at all okay so now i can just click and oh yeah it's working great and i will try my two features if i click on overlay i will trigger toggle model again up and if i click on the close i will trigger it again too so yeah yeah it's working and this is how we are making some model with react i won't show you a last thing actually if you have some contents so let's just imagine there is some text okay below it usually you don't want to scroll when you have the model open you know because it's not really a good user experience so you can prevent the scroll when the model is open so to do that we will just put right there if model then document.body.classlist dot add active model okay else i will just remove it i don't know why but the toggle method of the class list is not working with the body right there i think it has something to do with with react actually so i'm just using the add and remove okay so i will just add and remove the active model class and it will remove the the overflow why so it will remove the scroll bar scroll bar scroll bar okay so if i open it see there is no scroll bar and i can't i can scroll i'm trying right now i'm trying to scroll and i can't anyway when i close it up i will have my scroll bar again okay so this is a way to prevent the scroll when you have a model open all right i hope you understood me and everything was right you can use the source code and everything and well see you next time bye

Channel: The Web School.

Views: 128,350

Keywords: react, modal, popup, pop-up, ui, component, front, ux

Id: 9DwGahSqcEc

Length: 6min 39sec (399 seconds)

Published: Sun May 16 2021