Build a POPUP component in React JS ~ A Beginner Tutorial with React Hooks!

what is going on fellow developers my name is tyler potts and in today's video we're going to create this really cool uh pop-up component so if i refresh this page we have two different types of pop-ups we have a button pop-up but we also have a time to pop up as you see i set that for five seconds and five seconds in we got this new pop-up actually awesome pop-up it was triggered by a timer let's close this and we can also open it up by a button so we can also have a different trigger really cool pop-up it was triggered by a button and you can create as many pop-ups as you need for your page you can style this pop-up however you want um all of the functionality is done in pretty much in the component but the styling can be done however you like so without further ado guys let's get started [Music] okay guys so as usual we're going to need to be using npm which is comes it with node it's a node package manager it allows us to install or run certain commands for this um to get this started we're going to run mpx create react app and what we're just going to say is react pop up youtube now if we hit enter this is going to create our react project boilerplate so we can get in there and start working on our popup component okay now that's done we can cd into react pop-up youtube and also yeah we can cd into it and once we're in it we can open it up with whatever text editor you want i'm going to be using vs code i'm going to run code dot i'm going to concatenate on the end of this using double and or ampersand and i'm just going to say um npr or no it's yarn start and now if i hit enter this is going to open up official studio code and it's also going to start the development server for react as you can see it's starting up it's loading um and there you go we've got our boilerplate app so let's just bring this all the way down for now and oh excuse me you can go now you can come up front and let's just drag this to be as big as we need it there you go so let's just remove the welcome here now inside of our source we can get rid of pretty much everything but um well i'll show you let's remove app.css we're going to move test uh we're going to remove logo what's going to remove rep web report report web files and setup tests as well and we're going to be left with index index.css and app.js now when you go in index and we need to remove web files from in here we also need to remove this function down here close that and that is that index done with now inside of app we need to remove um the logo.svg and also the css we're then going to need to remove everything with inside this header or inside this app and just say react app for now hit save and if we refresh there you go we see we get the react app on the right now um and so yeah so let's get started by going into index.css deleting everything from in there and now we can just add our quick some quick uh reset codes we're just gonna say margin zero padding zero uh box sizing border box um what i'm just gonna say font family fire sans sans serif and then we're just gonna have a main tag which is gonna have a padding of 32 pixels uh display flex again this isn't styling for the actual pop-up this is just styling for the page so it's in the center uh we're just gonna align items center uh justify content center and then we're gonna give it a min height of a hundred feet h which is just the whole screen height hit save hopefully if we refresh refresh refresh oh it's not going to work so we don't have a main tag so we need to create a main tag in here hit save inside of this main tag we want to give it let's say a h1 which just says um react pop-ups and then we can also give a button and in the button we'll just say open pop-up hit save and there you go we've got the react x type tile with the open pop-up now just for confirms i'm just going to add a couple of breaks in between there just so it spaces that out so they're not right on top of each other so there you go we've got an open pop-up button and also react popups so what we need to do is we need to create a pop-up component which we can actually pass things through so let's go over to our source we're going to create a new file i'm going to say components forward slash popup dot js hit enter and there you go we've got a new components folder with a popup.js file inside now inside of here i'm going to run a command or a little snippet here i'm going to say react functional component export now if i hit enter you can see it creates this boilerplate code now if you don't have fies code or you're not using um this esf es7 react redux graphql and react native extension then you can't run that command um but you can just copy this out if you want to so inside of here we're just going to give this the class of pop out so for now we're actually saying that we need to actually well for now we'll just say class name pop-up and then here we can just say dot pop-up hyphen inner and then inside of that we can have a button with the class of close button and this can just say close you can add an icon in here or whatever you want but that's what we're doing for now so we've got this pop-up here but we need to actually it needs to be triggered it can't just be um created so we're going to create props and inside the inner here we can actually say props dot children so we can pass through um elements and stuff into sides this pop-up so it doesn't have to be the same layout or anything like that we don't have to create multiple pop-up components we can actually use this to pass through uh props and i'll show you what that does in a second but the first thing we need to do is inside of here we need to say props um dot trigger which is gonna actually be our trigger to pop up we're gonna do a question mark and pass through an empty um or we're gonna pass through a block here a jsx block and then we're going to do this colon say if it doesn't exist we're just going to pass through an empty string so when what we're going to do is we're going to pass through a boolean a true or false value which is going to be our trigger to actually trigger this pop-up and if that trigger is true then the pop-up will show if it's not true it won't it'll just show nothing and that's what we're doing here so that is all we need for this actual component here but we do need to style it but let's do that after let's actually get it popping up first so let's go into our app and let's actually import that so we're going to say import pop-up from and then we're just going to do dot slash component slash pop-up and inside here we can just under the main we could just go actually let's do it in the main for now so it's going to appear underneath the whole page so we're just going to say pop up sorry not like that pop up and then inside of here we can just put let's say a h or h freaks before we got h1 on the page just say h3 that's s my pop-up save and as you can see it doesn't appear but if we pass through trigger and set it equal to true you can see my popup appears with the close button as well so we can create a variable that we pass through here that we can click on let's say this button which will turn it to true and then it will pop up so let's go style this quickly let's set this equal to false hit save so now that should disappear there you go and let's actually go style our popup so inside of our file root in components create a new file and call it popup dot css and this will be specific css for our pop-up so what we're gonna do is set the popup um and we're gonna say it's position equal to fixed because we want it to stick we want to pop up overlay over the whole screen so we're gonna do top zero left zero width 100 and height 100 vertical height to give it the max height we're gonna give it a background color of rgba zero zero zero zero point two so it's just got a little um background darker background color but it's still see-through so you can see what's behind it let's give it a display as flex just to move the actual content to the center justify content center and align items center now under here we're going to set the pop-up inner oh not armor inner it's going to be position relative we're then going to give it a display well we're not going to display but we'll give it a padding of 32 pixels we're then going to give it a width of 100 and a max width of 640 pixels now we can also set this as a variable which we can change but for now we won't go into that let's set a background color to be white and then we just install the actual buttons let's say pop-up inner dot close button and in here we're going to set this as position absolute and we're going to flow it to the top right so we're going to say top 16 pixels right 16 pixels hit save and we won't see anything we need to go into our pop-up and import this so we need to say import um and we give it the name so we're going to say slash popup dot css hit save and in our app let's just turn this to true so we can actually see i probably should have kept on true anyway and there you go we've got our little pop-ups if we make this bigger you can see we've got a pop-up here we've got a close button which doesn't do anything yet a slightly grayed out background and the pop-up actually there so there you go there's a pop-up we can also add more content in here you can say like this is my button triggered pop-up hit save and there you go this is my button triggered pop-up um so inside here let's actually move this now under main like that um the only reason i didn't have it outside of main to begin with is because without having it positioned absolutely it would have been sat really far down we would have to scroll um so we've got this pop-up right so now we need to somehow get a variable in here that sets it equal to true so let's import we're going to say import use state from react so we'll get the state from react and we're just going to say const and we're going to pass through our button pop-up and then our set button pop-up variables i'm going to set this equal to use stay of default false so let's get our button let's pass it in here so button pop-up inside of our trigger and then on our button we can say on click is equal to and here we can say we could do an arrow function that there says set button pop-up equal to true hit save so that's gone now but when we click on our pop-up button you can see it opens our burn so let's refresh the page and try that again click it and it opens our popups as simple as that you can also add animations and stuff like that to this i won't do that in this video but if i say if you want to see them please let me know so that is a simple opening the button but now we need to close it so to do that we actually need to pass our set button through here so we're going to say set trigger equal to and then we can pass through our set button function uh let's just close this you can see it a bit better set button pop-up let's go into our let's close these css we don't need anymore let's go into our popup and now on our button close we can do on click is equal to props dot set well we can actually do an arrow function here first props dot set trigger and we can pass through the foul view which is going to be false hit save and now if we click the button you can see open pop-up and close button both work so now you can click close and you can open it so that's really cool but why is if you want a time to pop up once if you want one to pop up after about let's say five seconds after your website has opened up for someone well we can create enough for you state here so let's create here and let's call this insert button we'll call this timed popup and set button pop-up we'll say set time to pop-up and we'll also leave it false and now we'll crack create a second pop-up and then this as simple as this you just create a second pop-up and you just literally uh at my time to pop up here we can say and this is my timed triggered time trigger that one time triggered pop-up um obviously we need to actually change these values to be timed popup time pop-up and set time pop-up but now how do we actually trigger it to begin with to trigger it to begin with we need to create a we need to basically set a timeout to say how many seconds we want but to do that we need to actually partake called use effect now we could just say inside of here and say set timeout like this and we could say five thousand or we'll say two three thousand seconds for the test and we say set timed pop-up equal to true now if we save this will work if you give it a few seconds uh one oh oh there it is my time pop up there you go it's popped up and we can close it but look it's opened again it starts rapidly opening and that's because the the um component is changing this is reactive so anytime this changes everything in here gets redone so to fix that we need to use effect we need to do an arrow function and then we need to move this function inside of use effect and we need to pass through an empty array so now this is only going to be called the one time when one time when this is launched so let's refresh this page now if we wait three seconds there you go my time popper gets triggered let's click close and now after enough three seconds it doesn't open up again you see it only opens at once so there you go that's how you do a time trick so we've got our open pop-up which is our button triggered pop-up click close and if we refresh and give it another three seconds there's our time pop-up so as you can see guys let's put this at full screen now or a bit bigger shall say we there we go so you can see our pop-up triggers here so let's refresh one last time and you can see how it works so time trigger there you go our time trigger popped up let's close and let's click open pop-up and there you go we've now gone open pop-up and it's as simple as that that is all you need now you can style these however you want this is not restricted to your styling or anything like this it's just the functionality you need to keep the same if you want it to work of course uh the open the close and stuff like that so there you go this is how you create a really simple pop-up which you can trigger however how many if you want you can just keep creating these and just giving them different triggers and different set triggers and they will forever keep popping up you can also give them the same trigger i won't recommend it but you could if you wanted to thank you all for watching this video if you enjoyed it don't forget to leave a thumbs up it really does help the channel don't forget to smash that subscribe button and leave a comment if you have any questions or queries you want to ask me and i'll try and get back to them as quick as i can now the last thing i just want to mention is i have a ko fi link where you can go and donate the price for coffee um to basically show your appreciation for the channel if you enjoy what i do and you like the content and supporting the channel allows me to buy more stuff put more time into my content and just give you more uh videos more uh content on twitter more content on youtube and it just helps out the channel a little so if you want to help out then head over to the cofo link in codefi link in the description and you can even just follow me you don't have to pay anything just to follow will also help so thanks everyone and i will see you in the next video peace out you

Channel: Tyler Potts

Views: 164,642

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: i8fAO_zyFAM

Length: 17min 4sec (1024 seconds)

Published: Tue Jan 12 2021