React Modal Tutorial Using Hooks and Styled Components

yo what is up everyone so today i decided to make this super simple modal with react and i'm going to share with you how i did it so let's go check out i'm a modal super mode right here click it and boom we have a little animation so use some little react spring action here and it's just like a filler obviously you'd have to fill this out for yourself but ideally you can click outside it closes also you can click the x it closes and i decided to get a little fancy and if i press on my keyboard the escape key you can't see it but i press it and it closes as well and then pretty much i can click here and you can't really hear let me see if i do my mouse you can't really i don't know if you can hear that but uh basically i'm clicking everywhere nothing happens and then voila and we're back to normal so it is super basic super simple so without further ado let's hop into my code editor and let me show you how i made this all right so here i am on my terminal so go ahead open up your terminal and let's go ahead and let me type in npx and then create react app and then let's just do react modal and let's put uh yt this is just for youtube so i know and then go ahead and press enter so once this creates the react app and it finishes loading i will see you once it is completed alright so it just got done so i'm gonna go ahead and cd into react dash model dash yt or whatever you named your project and go ahead and do code dot because that vs code and this auto opens it if you don't have it set up quick google search to set it up it's not too difficult and then let's go here and i'm gonna do you can do uh control backtick opens up the terminal and if i run yarn start right now is going to give me that error most likely so let's see if you don't have yarn just do npm but uh i just got to copy this really quick right click new file and do dot env and then simply let me just paste that in save it and then let me just go ahead and do yarn start again i just press the up arrow brings it back if you don't have yarn obviously you do npm and i think i have it up already on the background so let me just press y and let's see what happens once this loads computer is being slow because of uh filming but there we go so let me bring this over let's shrink this to this side and now let's go ahead and let's see let's delete the app.css not gonna need this i'm gonna use style components from most of this index.css don't need that logo we can get rid of this and i'm not to worry about the rest of the other stuff but let's see going index.js let's get rid of the index.css save it here go to app let's get rid of these two right here and then let's get rid of majority actually just get rid of everything and let's just put little fragments and let's just say boom and then we save and perfect all right so everything's good you've made a react app before you already know the drill and let's go ahead and i'm gonna have uh stock components so let's go ahead and i'm just click this plus sign here let me just do yarn add style components if you don't have yarn obviously npm install those and then once that finishes we can check the package.json and let's see if it actually shows up boom okay we got it right here now another thing we're going to need is a react spring so let's install that now before i forget and there's like a specific version you have to install because you just do regular react spring you try to do what uh i did you can have this air that's going to go make it go crazy so let's go ahead and actually do let's do yarn add react dash spring and then we do at next because i want to have uh one of the newer versions because this certain air that pops up so let me just hit enter and then once that finishes up it should pop up and it should be like 9.0 that's like rc3 yeah right there awesome okay cool we got this and uh we have react icons too so let's just do that one more time let's do yarn add react icons and this one's pretty simple and that should be uh it for now so then once this finishes we can just go back to my regular terminal here and we're pretty much set so now let's go let's create a uh in the app let's do some some stock component action so first let's do a i'm just gonna do this inside the app ideally you could make these like a custom uh like like component folder or like assets folder but for now let's just do this inside of the app let's do cons container equal to stop that div so if you know stock components then you know the drill but if not i'm just basically styling this right now so flex just my content center uh let's do a live item center and then let me just put a height of 100 vh and then let's just do a button and then that will be good for this page so let's do const button equal style dot button back take back tick and let's zoom in with 100 pixels just in case screen gets too small let's do padding of 16 pixels by 32 pixels uh border radius let's do four pixels uh border none and then let's do the background we'll just be hashtag one four one four one four color text would be white uh font size 24 pixels and then crochet pointer alright so now let's just put these up right now so let's just do uh let me erase all this stuff here and let's just say uh container and then inside the container will be the button so here on a modal super model right here and see style defined so we're going to go up here and do import styled from style components and boom okay so we got the button perfect so now all we need to do is pretty much create the modal and then do all the state and we're done so let's go here new folder and we're going to create components folder just for uh as you can see easier let's just do a new file just call this one uh model.js and uh let's see i want to do uh yeah if you have this this uh extension here es7 type it in get this one right here that one make it life easier and then i can just go ahead and do like uh imr and then put react and uh also let's do uh import styled from style components and then uh let's see [Music] we're gonna have the react icon eventually so i mean we'll do that in a second but then at the bottom under here let's do export so let's see export const model and then set the equal to empty arrow functions for now because we'll add our uh problem state in a second but let's see so first i want to just return and let's just return something basic so let's see here let's put some fragments for now and let's just say actually let's do a div whoa why is it caps modal okay so right now nothing working so what i'm gonna do is actually let's go to app.js because uh i'm gonna actually see if this is working first so first thing we're gonna do is we're gonna have to add state so let's go up to the react i'm going to use the use state hook so it's imported with the curly brace and then let me set these values on here so i'm going to say const and then you put in the brackets and the first one is going to be the value for your state and then the function after which will be set show modal that's going to update the state and it's going to be use state of false and then pretty much we're going to do is create a open modal function so whenever i click on the button it pops up so let's just do cons uh let's do open modal you name it whatever you want to i'm going to sit there do an arrow function and pretty much what i'm going to do is just set the show modal value and i'm going to say from the previous then the arrow function and then the opposite of the previous value basically it's just toggling it uh back and forth and then on the button we can do an on click and then this is how we're gonna target the open modal function so now pretty much here we save this right now let's actually uh let's see let's import this moto 2 so let's do modal and then if you press enter it auto imports it at the top so both if not go ahead and like write that in import modal from components and i'm going to pass in the show modal property here and then we're going to pass it in show modal and then also let's have set uh show model here because we're going to need this when we um go back to the actual modal.js file and save it and now you can see right now it's currently showing the actual modal on here so now let's actually let's see if i can uh i want to pretty much only show this on the actual clicks let's see so if we go back here to the modal we can say like this if we do um curly brace we can say like show modal if that's true return this div oh let's do no and uh let me do it like this and let me see make sure yeah right now i think it's just gonna return into like a single y for now doesn't really matter we have to actually pass this in to the value so i'm gonna say show modal and then set show model so now if i click this button it should just pop the modal and boom now you can see super basic uh functionality but we have to do a bunch of styling and additional things so at least right now we can see that it works so now what i want to do is uh let's actually let's create a global styles really quick i just want to make sure when i do is that it's like all clean so let's just do a new file oh not on you for it that's our cnu file and let's do [Music] global globalstyles.js i mean i could've just done like an app to css but we're here already so let's do import create global style from style components export cons global style equals to create global style back to backtick and then let's do a little asterisk and let me just pass everything in here so let's do box sizing border box uh let's do margin zero padding zero font family ariel for now and then sans serif so then we have to go back to the app.js and just pass that in so let's do google style i pressed enter so it should have auto imported if not make sure you import global style from that global styles and then there's some closing tag here and you can't really tell right now but uh fonts change and then like once we create the uh the more design it'll look way better but yeah i'm pretty much good there and now let me just uh go ahead and start styling this stuff so first off let's go ahead and let's create a background so let's do cons background equal to style.div back to backtick and i i'm gonna have the github up but i mean to save us some time because i don't want to hit here and bore you with like css and plus if you have a different design model then this stuff doesn't matter to you so i'm just going to copy and paste all my um styles but ideally you can see these if you want to copy along and then let me do oh let's see cons modal wrapper equal to style dot sty backtick backtick whoa what's going on and let me just play paste my styles in here again i'm just saving time but this is essentially the actual model now so it has like the width height background columns etc and then i have an image so let me do this one now let's do cons actually let me close this first this terminal because you can see better hey hold on what the heck okay there you go let's do uh const modal img equal to style dot img back tick back tick and let me just pass this in here and then let's see let me just let me straight up copy and paste this stuff because it's pretty pretty basic nothing fancy and then this is the rest so just model content and then i didn't i just kept it uh pretty basic so i just had regular like p tags and um button tags so i gotta make everything i saw a component but ideally you'll see once i start writing it out and then also last one is the close the icon so this is just the x so here we go the original one zooming out it's literally just that x right there so pretty much let me uh let's see let me import this this react icon this is what i'm using right here for the icon so i actually import that before to make it work so i have to do is do like import uh md close from react dash icon slash md and now let's actually add this into our modal now so let's see what i want to do is if show model is true so let's put this on another line and then i should have used as parentheses so let's copy all this inside of these parentheses i'm not sure why it didn't do it so now your code should look like this now pretty much gonna say if show model is true let's erase all of this so turn your operator uh curly bracelet modal question mark if that's true i'm gonna do parentheses and then now i'm gonna write my code so let's do background and then on background we'll add a bunch of stuff too as well let's just let's fill it out for now so we have the background again this would be your actual uh style yourself and then let's do a modal wrapper and then we'll pass in show modal equal to show modal and then press enter here and then let's do modal image and this is actually let me drag the image in src equals to require since react doesn't like if i don't put this and then the is going to be modal.jpg and then the alt will just simply be uh camera and then it's a self-closing tag right here so i'm gonna actually drag this in again if you're not copying my design then obviously you'd have your own image or whatever you else you do it but let me just drag this in really quick so i got this just off the random uh picture website so just modal image or modal.jpg when i named it again you would have to um you need to download this from my github or you can just straight up just watch this part but then under here let's just do modal content press enter and then h1 are you ready so i didn't go all the way in and put them all there i just put these like normal html tags and then p tag let's do what get exclusive access to our next launch and then let me do maybe you can see it better and then just simple button on my network button let's just stage right now so it's just like filler design for now but then here's where the um we have the close button so let's do close modal button and then i have aria dash label equal to close modal and then pretty much on click i want to set the value so on click print the arrow function to set show modal parentheses previous value arrow and exclamation mark priv so basically just switching to previous value and then just closing tag and pretty much good here let's save this and let's see what happened ah see what line is this 81 so it looks like oh yeah yeah so after this parenthesis we gotta do colon no save it should work now yeah so now you can see it's so far it's pretty much it's pretty much working legitimate that was that like that's it this is obviously you feeling your design but the thing is the one thing isn't working is like clicking on the actual uh like background then also if i press the escape key that's not working either it's just this so if you just needed this i mean it's pretty basic but ideally most models i've seen you have it click on the background so it's actually uh amp i didn't make this more responsive but uh it's just desktop for now for example purposes but pretty much what you need to do is uh let's go here and i just use ref again this is not necessary but i just wanted to use it for this example so i go to the top let's do use ref also um we're gonna need to use effect and we're gonna have to use use callback and then also for react spring we're gonna need to do um this is how you do it if you never use react spring it's not too hard but we'll just do use spring and then animated from react spring and that should be everything for the imports now we just write the functions and then we're pretty much set all right so let's go let's go here all right so now let's do um i'm going to say const modal ref i'm just naming it that equal to use ref and then let's just actually let me um make sure that we actually bring animation first so this is what i'm going to do i'm going to say const animation so i'm calling it for now so equal to use spring and then you say parentheses curly brace then i'm going to press enter and then inside this i'm gonna say config curly brace and i want the duration just to be uh 250 milliseconds so you just do it like that you put a comma here and then set the opacity and then pretty much going to say show modal if that's true resolve it to 1 else 0 and then let's do transform and let's do show modal again and if that is true let's do backticks translate y parentheses zero percent then cur uh colon backticks translate y parentheses minus 100 and then pretty much good there now we need to do to get this to work this animation is you go and wrap it around where you want to animate so i only want the modal not the background so i'm gonna go right here by background press enter do animated dot div and then we'll say style equals to curly brace animation and then i close it out i'm going to take this closing tag x go under modal wrapper press enter and save so now once we added that quick little lines of code we need to go here and then click it and boom now you can see that it has a little animation effect so right now nothing still works except the x but you can see you have that now that's unnecessary you don't need it but you want to get a little fancy go ahead and now let's actually let's add the closed modal so i'm using use ref so here i named it modal ref so i'm gonna add uh let's add this to the background so i'm gonna say ref equals to modal ref and then what i need to do now so let me go under animation and i'm just create a function so let's say cons close modal equals to e and then i'm basically going to say if the modal ref dot current essentially saying like whatever i'm clicking on is equal to e target then i want to set show modal to false and now i need to do is pass in that to um here so on click equals to close modal so now oh yeah it should work now okay so i click here i'm a model boom okay and then the x bam so now i want to do one last thing is the escape key now you don't have to do this but i just want to show you anyways i already have it so pretty much here's a little cool trick we're going to do is say cons i'm just call this key press i'm saying equal to use callback and that in the callback we're going to pass in and let's do e arrow curly brace here and then pretty much we're going to say and also let's pass in the array i'm gonna say set show modal comma show modal but let's go back inside of it now pretty much gonna say if e dot key is equal to escape and i got this off of um stack overflow like the way to write this but it's pretty common and then so essentially saying if the key you press on your keyboard is the escape key and show modal is true meaning like it's actually showing it's open then i want to set show modal to false and then we need to actually call this function so i'm going to say use effect and then pretty much just so it doesn't render like a million times because if you console.log this right here like just some random message is going to render like a million times it's going to be annoying so i'm going to use effects let's do arrow function with curly brace we're going to say document.add eventlistener of key down and then we're going to call the key press function here and then under this line we're going to return it so that it actually removes it so i'm going to do arrow function document dot remove event listener and then basically we're going to say key down again with the key press here and now i'll just pass in key press dependency here so let's say key press and let's save this and let me test it out perfect all right so let me just go back let's check the console just make sure there's no errors so right now i click modal shows up x is fine click background is fine escape key perfect awesome so this is just a simple way i did it feel free to refer to code let me know cleaner ways to do this or even easier ways to create a modal and react and any other things if i you need um you notice that i can improve or fix definitely comment down below but aside from that view to the channel go ahead and hit that subscribe button give this video a thumbs up comment down below what you think and i'll see you in the next video peace

Channel: Brian Design

Views: 119,493

Keywords: react modal, react modal tutorial, react modal component, react js, react, react modal form, react modal hooks, react modal animation, react modal video, use ref, usecallback, react hooks, modal popup, react modal popup, react js project, reactjs tutorial, react js beginner tutorial, react modal from scratch, how to make a modal in react, react js tutorial, beginner react project, beginner react tutorial, beginner react js, modal, popup modal, close modal outside click

Id: d3aI1Dt0Z50

Length: 25min 13sec (1513 seconds)

Published: Tue Oct 20 2020