React Modal Component With React Hooks, Refs And Create Portal - React Javascript Tutorial

hey guys and Rizzoli on teach you how to create a reusable modal component and react so here are some examples of what we are going to be creating so you can see here this is on the invasion website they have this great sort of dark bluish background backdrop sorry and then they have the modal itself which is just a you can think of it as like a pop-up and then they have the content within it and here they have a little button to close it um so a modal is something you can use for in this case they use it for confirming at delete you close users for sign up or login a very common use is to create a newsletter signup so the user can just enter their email and then register the newsletter you could also do this for something like care of forum to ask questions so this has many uses and you can definitely find a great use for it Union and we have a react project you're making so they can start you want to open up your terminal and if I'm choosing the terminal inside my editor and you want to type in MPX create react app and then specify the directory so here this is just the base directory and this will create the basic react boilerplate so we don't have to deal with things like web pack and Babel I've already run this so as you can see already run orders so I already have water forges here so this will just give you all the inner dependencies and the public folder and the source files which is where all of our JSX and our react components are going to go so I stop our development server by typing again NPM run start this is once again in your terminal so here if we go over to s you'll see that the all of this stuff here is what we're seeing on the local has 3000 so I'm just going to remove everything that we don't need and I'm also going to reset the CSS so I'm just going to put a margin:0 padding:0 and box sizing of water box because that's just some basic reset and I'm just make it bigger so um the first thing I'll do is just create the basic JSX and a styling and then we'll get into the logic so we're going to beauty is doing this using react hooks and then what's kind of using references so to get started let's just create a button we're just gonna say open and lodal and I'm gonna put our own click on here or though it's not going to do much right now so it's just gonna be open modal and let's create the function for that and I'm gonna be using error functions and for now I'm just gonna have a say console.log open murder so now if I open up my console if I click the button we get open middle okay so now let's create the actual modal component so I'm just going to create a new file called modal GS and import react and just remember to export it as default as well okay so the basic JSX that we want for this is going to consist of a wrapper which is going to wrap our entire app or our entire core component sorry so I'm just going to call this modal wrapper we want a div for the actual content which is going to be the box so say module box and then adjacent to the modal box we also want a empty div which is just going to be the backdrop so modal backdrop so we have these three divs and then within the middle box I just want to whatever content that we bin so I'm just going to be prop star children and also remember to get props here so to get started with a styling let's start with the modal wrapper so I'm just going to give this a position of fixed so it's always going to be at the same spot which I want to be the whole screen so in this case a top top:0 bottom:0 left:0 right:0 and then I also want to actually we need to put a set index on this but we will have to put that index on the actual content so let's do the backdrop next and as such can be exactly the same as this let's give this a z-index of about 100 and let's also give this a background color so I'm just gonna say black with a 30% opacity so now if we just import this in our app our component so modal we now see we have the dark black back backdrop and now let's actually add in the content as well styling for the content so I want this one to be position or relative top 50% of the left 50% so centered and then we also want to make sure to transform and translate - 50% - 50 % let's give this a height of about 60% and a width of about 61 let's just change the height actually to about 70 let's give this a background color of just white and they've box shadow to make a sort of stand out which is just gonna be a 10 pixel blow within a with an opacity about let's say 25% oh and remember this is box a shadow not sizing so we also want to remember to put Z index on this one as well which is higher than the one of the backdrop so we can just put 101 and now you can see it's on top of it so I just also want to put a overflow Y of water and then this way if all content it gets bigger than this we would just have a little scroll bar here instead of having it actually go off the page off the screen let's also add a padding of about 40 pixels and then let's add some content now so I'm just gonna open this go to component up the h1 saying Moodle header and then some lorem ipsum you you so now we have some basic content here and what I sure think the height is a bit too much let's just say this is min height 30% it's not as nice and that the content is actually fits the bot so now we have the actual module here and we have the button let's start creating some logic so the first thing I'm doing is to be able to click on this backdrop and close this modal so let's create some state to handle whether the motor was open or not so I'm just gonna say sure and say show actually probably displays better we're going to be using react took few states and initially I want this to be closed actually for now just temporarily I'm going to set this to true just so we can click on the backdrop and I should close it because we have no way of showing this right now and let's say let's create two functions so open which is just going to set display to true and close which is just gonna set this way to false so now when we click on this or I put it on click here and just close so call this crows function here now we have to also remember to add in the conditional so if display so for showing it and it's true we just want to return all of this otherwise I just returned null now here initially it's true so showing it we click on the backdrop and it goes away it's now on add the functionality to be able to actually click on this open modal button and then actually show with the modal to do that I actually use references and before I actually use references there's one thing I just forgot is that when we look at this component now if we were to look at the HTML you can see that Moodle if I was to refresh in a show again modal is actually here you can see the div for modal wrapper is actually nested but I don't want it to be nested I have shown it to be next to the root div so we can actually use we can create a link between a div that we can create here and the motor component and dumb I sound bit confusing but I'll show you I mean so if we import reactant from reactant and if we open up on public and then I'll go over to the index.html [Music] I'm just going to remove all of these comments so here I'm gonna create another div and just give this the idea of modal routes so I want to attach the modal wherever we call it even no matter how far a nested down it is I want always have it attached to this modal root div so to do that what we can do is use from react on the create portal so I'm going to do this in the display block so react Dom dot create portal and the first one as you can see here the first parameter that we have to give this is the reaction note meaning this it's all of us JFX and then the second one is actually the Dom node so this specific Dom node here with the ID of modal routes so to do this I'll just show you guys how it would actually look we can just put all of this into here and this might not look too clean so I'll just make sure it looks bad and also make sure to return this and then for the second parameter I want to actually get this this div here with the ID of modal routes so to do that we can just use document dot get element by ID modal route so now if I was to open this up again you can see here we have motor words which actually has modal wrapper as I did so you see now we are we are indeed connecting recurring a link between the modal component and this modal root Dom node so that this modal component will always be nested within modal root Dom node so this means that no matter how far down we call this modal component it will always be linked directly to motor route so that's just something small but quite nice so now let's actually move on to being able to open and close this well specifically open this using the open modal bond so I'm going to remove this and I'm going to create a reference solo door reference and we're going to be using the record or use ref so I want to pass this reference down to the motor component but you actually notice this gives us an error saying we need to use the photograph so if I open up the console you can say you can see it says function command components cannot be given refs attempt to access this rifle fail did you mean to use react or photograph and we are only going to use reactor for F so any modal component I want to I'm going to run first imports order F and then to use it we have to wrap our entire application or entire component sorry in the for draft so I'm just going to cut this right for drive and then within here I'm just going to paste you can burn it in so the syntax highlighting it might be a bit strange but I just literally copy and pasted the motor component in it and asthma or first prompted we get it still props but the second one we actually get now is the ref now this ref doesn't work the same way as it does in class components so you might have to think of this a little bit differently but with the ref what we can do is we can attach methods to it using the use imperative handle function so what we can do is say use imperative handle and this takes two parameters the first one is the ref so this is going to be this one so passing this rough down here to use imperative handle and then the second parameter is actually going to be a function where what we return from the function we passed into the ref so whether you can think of this is if I create this function here and I returned for eternal object wherever I return here so this object will be put into ref and because here we specify ref is equal to mode or F wherever we put inside here so this return will be put directly into mode or F so that's how I want you guys to think of it my son bit confusing but show you guys an example so if I say test method and I set this equal to u console.log actually I've never says to async anonymous function console.log testing modal ref so now when I click this button I want to console.log the modal ref so now when I click this you can see we have this object here if I open up the object and I open up the current you can see we have this test method which is a anonymous function and if I expand this a little bit you'll see that this actually is the console.log for testing mode or F so what we could do is say mode or F dot current dot and then I call this test method and then if I if I call this it should console log even without wrapping it here you should just console.log testing mode or F let's give that a try so you can see here we game testing modal ref whenever we click this so now you already might be able to see what we can do with this so what we can do let's say open modal and I set this equal to an anonymous function which is going to call open and then we can also create a closed in case we want to use that somewhere else and just cool clothes so this open refers to this function here and this close refers to this function here so passing them into this reference as methods and then we have access to these methods in the modal ref current so now if I just once again console.log the modal ref dot current you can see we have the open mode or closed modal so specifically I want D open modal and then if I remove the console log now it should happen is when we click this we're going to call this method right here which is then going to call open we're just going to set this beta true which is then going to create a think between the component here or this JSX we have here and the modal root component sorry the motor route Dom node in the index.html that might sound a bit confusing while your show you guys I click this and now we have it open and as you can see here in modal routes we have indeed connected it so that is just the basics of how you create a modal and a quick use case for how you might use the close let's say in here we add a button so this is inside the modal um children saying closed mode or you can just put on click I'm just going to do as a nonnamous function here so a mode or F dot current door close and modal ah just gross not gross medal so now I click open modal and then here this button this closed mode upon which trigger this close this close method here which I trigger this close function and set at the split force and yeah you can see there works fine so this is a really really simple reusable modal component that you can use and all your projects not just in one specific project you can see it's very flexible you can change all the styling you can choose exactly what components go outside of it and you can even hook a component into the modal route so hopefully this wasn't too confusing with the references here I'll just go through it one more time the for draft is just going to wrap your entire component and the first term and then it returns a normal iron.most function like this where the first parameter you get is your props same as normal but the second one you get is the actual ref and then you can use the react method you use imperative handle and connect to your ref an object containing methods which are functions a side of your component so these methods here could do anything but in my case I wanted to connect them to these two functions here which are the functionality to open and close this modal method this modal components are so I hope that wasn't too complicated if you guys want me to go through it in more detail about how this forward refworks and react Oaks compared to how it works and cloth components the please let me know hope you guys enjoyed the video thanks for watching

Channel: LetsCode

Views: 19,420

Keywords: javascript, react, react js, modal, modal component, react hooks, react refs, react modal, react create portal, tutorial, react tutorial, javascript tutorial

Id: SmMZqh1xdB4

Length: 18min 24sec (1104 seconds)

Published: Fri Jan 31 2020