Reactjs Modal Tutorial With React-Portals

hello and welcome back to the channel in this video you will learn what are react portals and why this is the amazing solution to run the element inside root level so let's jump right into it the first question is do we have a problem at all all front-end frameworks are working in the same way we have a component three of all components and we are starting somewhere on the root level and then we are going deeper and deeper and deeper and we are just rendering all these components as a tree but here is the problem what happens if we need to render something in the root level for example sometimes we need to implement such things like models or tooltips so some elements which should be shown on the top of your current element and the main problem is here when you will render them inside of your component then you may have a problem with positioning or overflows so actually overflow hidden will just cut the element which actually means if you have a tooltip or a model and you are using overflow hidden it just won't work because you will cut the whole element and the best solution for this problem is to render all these elements like model or tooltip inside root so basically in the body and the point is that we can't really do it easy inside front-end frameworks just because we have this tree and we can't really work with body directly and actually react is amazing because they implemented this react portal feature just inside framework itself and actually if i will compare it with angular in angular it's the most complicated and the worst possible scenario how you need to implement this feature and in react in comparison it is working like a breeze so now let's try to implement a real example to check how it's working let's say that we need to build a reusable model that we can open in every place of our application and render whatever we want inside so let's try this out now so here i have an empty create react app application and if you don't know what is create react app or how you can generate a project with it i will link here a video i already talked about that and as you can see inside project i have in source just two files index.js with just app component and here is my app component with just h1 tag so actually this is good start for us now the question is how we are planning to do this feature so actually for me model sounds like an additional component where inside we can pass different content for example let's say that app is our consumer so this is the component where we will use our model so first of all here i want to write some div and inside we can just write app component so we see that it is rendered and now we will use here our model that we will create in a second so what i want to do here is open and close model and write some content inside so actually the idea is that we can provide content from the consumer so from our app and here we can pass whatever content we want and it must be rendered correctly inside our model now let's create this additional model component so here in source i will create model.js and here just create stateless function model without any parameters and now let's export here as a default our model and now here we can return something but here is the interesting part as i already said it is really nice how react allows us to render elements inside root so actually here what we can do we can import create portal from react dom and actually this is important it's react dom and not react so what is exactly create portal this is something like portals for example in games or in fantasy books so this is something that is leading you to the different place so the idea is that we are now inside our model or inside our app or any component and we can say please create a portal to the root so actually we will render our model not inside our app but directly inside root and for this we want to return here not just normal markup like we're normally doing but here we want to return create portal and inside we just pass in our normal markup like we normally will so here i will write div and inside for example model but here is an interesting part actually this is the markup and this is the first argument of this create portal function which means we have here a second argument and here we can say document get element by id and let's say here for example model which actually means that this is the same logic like it is inside our index.js as you saw here we have reactdom render and here we have some markup as the first argument and then we have this document get element by id root which actually means that we are rendering our model inside additional element which is outside of our current react application now the only thing that we need to do is create this element inside our index.html page so for this i will jump inside public and here we have our index.html and somewhere here inside body we have our div id root so now we need to create here dvid model because this is how we named our element and actually this is all that we need to do in order to render our model inside root we're just using create portal from react we're just providing inside what we want to render and where and we're good to go so actually the abstraction that react is doing for us is amazing because we don't need to attach something to body or somehow handle react plus some elements this is all done out of the box by react now let's bind this model inside our app and check if it's working so here i want to import our model from model and now we can render it actually we already did that so this is our model and let's now reload the page as you can see we don't have any errors and here you can see that we are rendering first of all app component and then model component but let's now inspect this model and as you can see we have here div id root and this is where our application is being rendered and we also have here dvd model and this is completely independent to our react application and we're rendering our model component inside as i already said this is the best approach that i saw in front and world at all now that was the basics of create portal that you need to know but actually now let's bring our model to some leaving state first of all of course we don't want to render it out of the blue so here we want to render it for example when we're hitting some button so let's create here a button and name it open model and here we can bind on click event and when we are clicking on the button we want to show this model this actually means that we need some state and actually for this we can use your state hook from react hooks and if you don't know what you state or react hooks i already have a full video on that i will link it here on the top so for this i will import here your state hook from react and now here we can create state so here we want to create state for some property for example is model opened so here will be is model opened and here set set is model opened and this will be our state so here we're calling ustate with default false which means by default this form is not opened and now we can use this ismodel opened to understand if our model is opened and set is model opened and the moment when we're clicking here so here i want to set is model open to true this is why here we need a function and we're calling set is model opened with true and let's check this now actually we can just console log here our is model opened and let's check what is it about we reload the page as you can see we have now this button open model by default his model opened is false now we're hitting on this button and his model opened is true now we need to render our model element only when this property is in true and there are two ways how we can do it first of all we can just wrap it with if condition of react how we're normally doing but the problem is here that every time when we are using a model we must wrap it inside is model opened and here create this state and this is a little bit verbose for me what we can do instead is just pass inside model property is opened and let's say here is model opened now model by itself can decide if it should render something or not so here inside where passing our is opened actually this is model opened from our state now we can jump inside model and say here that as an argument we're getting is opened and now actually if it is not opened we just return now so we're not rendering anything at all and in this case we don't need to do something on the parent so here because we just passed inside is opened and model is handling everything by itself so let's check this out we're reloading the page we don't see our model we're hitting open model and now this component is being rendered just like any normal component now let's create some styles for our model and also some markup because just word model doesn't do anything so for this i will first jump in our model gs and write here some nice markup so here we have div model this is literally not enough what we want here is inside div to have more markup so first of all inside model we always have an overlay so we need some black background maybe a little bit transparent so we're blocking the whole page from being visible this is why here i'm creating overlay and this is just a div and we will make it with position absolute later after this we have div actually not class but class name because we are working with react here is class name model and here we will write some styles for our model now inside we want to render two things first of all the content that we passed from the parent and secondly the cross button so we can close our model so first of all here i want to create the span where inside we will render the cross so here will be class name close button so we will style it later and here i will just put x and after this here is our div with content so here will be class name model content and here we want to close this div and inside render children and actually what is children this is the content that we passed from the parent so actually inside app we have inside model this content as you can see content we can write here content from app now we can get here our children just from the structuring of the props so here will be children and now they are rendered here inside model content so let's check how it looks like when we reload the page now errors are here we are clicking open model so first of all we have here content from app this is what we passed inside children and here is our cross so we can close this model now we just need to add css for our model for this let's create additional css file and name it model.css actually we can create maybe additional folder but i won't do it now because we don't have that many files so first of all here we need model and models are always position fixed because doesn't matter where we're scrolling we want to see the whole model on the whole screen this is why here we're setting position fixed and we also want to center it this is why top 50 left 50 now let's add some sizes for our model so here let's say that we have width 500 pixels and height 300 pixels and we need here that index so it should be higher than our content so here i will put 3 and if you want to ask why here that index is 3 because 1 is default 2 we want to reserve for our overlay and that index 3 is the content of our model now let's bind this css to our model.js component so here on the top we can say import and just import here our model css but just remember that all the styles are simply global so i will reload the page as you can see we have an error missed semicolon so somewhere here i forgot to put semicolon actually as you can see here i put colon and not semicolon now let's reload the page we don't have any errors now open model at least our model is already centered so let's check the styles our model is there let's make it a little bit smaller so here is our model we have here overlay model here is the styles of our model and actually we want also to move it on the center so top 50 and left 50 is fine but we also want to move it back on the size of our model this is why here we want to add transform and here will be translate minus 50 so the half of the model and once again minus 50 on the vertical now let's check if it's working when i reload the page and click open model as you can see here is where our content but actually this is all correct and we just need to add here to model for example border one pixel solid red and now we can see if it's fine or not so as you can see actually our model is in the center but just our content is completely on the left so for now for debugging purposes we can write here border 1 pixel solid red just so we can see our model correctly now we need to style our overlay so what is overlay this is just a transparent background here which is position absolute and it must take the whole screen so here let's create overlay and we want first of all to say position absolute now top 0 left 0 right 0 and bottom 0 and this is how it is taking the whole screen we also want here that index tool so it should cover the whole content but not the model this is why this set index is smaller than this set index of the model and the last one is our background color and here we want actually to use black but it should be transparent this is why we need rgba color so here is an rgba for the black we have zero zero zero and here just dot seven so actually it will be a little bit transparent so let's check this out as you can see already we have this transparent background but the problem is here that our model does not have any background this is why it is the same color as our overlay we can easily fix that if we are writing here background white so fff and actually i think we can remove this border for now let's reload the page as you already saw here is our overlay as it should be and here is our white model now actually we can add some padding so it will look better actually 10 pixels is enough and as you saw now our content is a little bit centered the next step is to style our content i don't want to style it a lot but at least we need some margin from the top this is why here let's say model content and just add here margin top maybe 40 pixels so as you can see now our content is starting somewhere near the center and it is looking much better now we just want this cross to be on the right so we need to style it with position absolute so here i will add our close button and inside we need position absolute and here we will have right and from right for example 20 pixels so actually right will be here and now we need top maybe 15 pixels and of course cursor pointer because it's not a button it's a span when we reload the page as always miss it semicolon so here i put colon let's check this out as you can see now our cross is on the right and we have here cursor pointer so actually we successfully finished with our styling of the model and it is looking like real model the next problem is that we can't really close the model so we have this cross but it doesn't do anything so let's bring it to the live we need to jump inside our model here is our close button so we want here to add a on onclick event and what we want to do on click we want actually to close the model but the problem is that this is our parent who says if our model is opened or not so actually we must provide a function from the parent for example here we can provide on close function and we just call it on click here so we're calling here on close from the parent and when we're hitting x the function on clause in the parent should do something this is why let's jump inside app and here where passing is opened and we also need now to pass on close and what we want to do here is just change our state so we can say here set is model open to false so actually on close this part will change our state to false let's check this out i'm reloading the page we're clicking open model now i'm clicking on the cross and our model is completely gone which means everything is working correctly we could stop on this moment but actually it would be nice to have some real content here that will be looking like the content of the model so let's say that we want to build a model for the sign-in form this is why here inside app let's add some form for sign-in and style it a little bit so here inside model we can first of all add our form and here we need onsubmit and on submit actually we will just close our form so we will do exactly the same like we already did we can set his model opened to false so here i am closing our form and now inside we need some inputs so first of all here i will do section because i want to add both label and an input so here inside section we need first of all a label and inside this label let's write email and now we need an input for our email this is why here input type let's say email and we will just close it so we won't bind any data here i will just copy this section once again and here we will have label password and here type password and after this section we need a button which will submit the form so let's say here sign in and actually we don't need any action here because we have on submit let's reload the page as you can see our form is there but this is really ugly so first of all let's check if sign in works so we're clicking on saying in and our model is being closed this is exactly what we wanted now let's add some basic styles to our form to see that it is working so here i will just create app.css and inside let's style the elements that we have inside our form so actually we have only section label and input so first of all here i want to import our css file this is app css and now inside let's style first of all labels so we need here display block just to make it on the new line so let's try this now display block and also increase font size to make it more readable as you can see it is actually already better the sizes are bigger and inputs are starting on the new line the next thing that we can do is style our inputs so here first of all i want width at least 300 pixels and height maybe 30 pixels and of course we need to increase font size of the text maybe also 30 pixels as you can see now these inputs are really big but probably they are fine for sign-in form to see the inputs really nice but actually we can make one size a little bit smaller the next one will be section and here we will just add some margin bottom maybe 10 pixels let's reload the page as you can see we have a nice margin between sections and of course we can send this login form so this is why here we want first to add some class so let's jump in app and on our form add class name and let's name it login form now we can style this login form so here let's add login form and now inside first of all let's say that we have some width maybe 300 pixels like our input then we want to center it this is why here margin zero auto and we need some margin from the top for example 70 pixels as you can see now our form is fully centered and it is looking really like a real form for sign-in in some website as you can see reg did a great job of hiding all complexity of rendering elements outside of react tree and actually as you saw all props and events are still just working like inside react3 but our model is not in reactory completely but we still can communicate and out of the box everything is working also if you want to improve your programming skills i have a lot of advanced courses regarding different web technologies and if you are interested i will link them down in the description box below so don't forget to check them out and if you like this video and you want more content like this don't forget to put thumbs up to support me and subscribe to the channel and if you didn't like this video consider watching it once again on increased speed that might help and i will see you in my next video

Channel: Monsterlessons Academy

Views: 3,730

Keywords: monsterlessons academy, react portals tutorial, react-portals tutorial, react portal tutorial, react portal modal example, react portal modal, react js modal, reactjs modal, reactjs portal tutorial, react js portal tutorial, react js modal popup, react js popup, react popup, react popup form, react modal form, reactjs popup tutorial, reactjs modal tutorial, reactjs popup window, reactjs, react, modal, tooltip, popover

Id: DbxoimzgsNg

Length: 24min 12sec (1452 seconds)

Published: Thu Mar 18 2021