Create A Reusable Modal with React & Tailwind CSS

welcome to the coding Loft my name is Sam and today we will create a small fun project using tailwind and react we will create a model so that means that when we press this button down here a modal will pop up and when we click on let's say the X down here it will close if we click on the background it will close or if you click on the button down here we can do whatever we want but it will also close the model again so we'll learn how to install Tailwind how to use the different classes how to use state to handle this modal State and how to create a reusable button and model component that you can use again in different places if you enjoy this video please leave a like And subscribe to the channel that would really help this channel a lot and let's jump right into the project [Music] so we get started by creating our project and for that I will use create react app but you can also use wheat next or whatever you like so one of the things that's really great about Tailwind is that it has a fantastic documentation so if you simply Google tailwind and to react you will find this page so we will just follow steps here so we start by saying npx create react app to create a new react project and we will call it Tailwind react model okay then I will create a project and from here we just go into our project by saying see detail when react model and then we can open it in vs code open a new terminal and say npm start to start the project here we have our basic react app but we don't need most of that stuff so go into app.js and everything inside is div with the class name of app you can basically just delete as well as the logo on top here and save again and now you have a blank app now we need to get back to installing tailwind and to do that we use npm and we say npm install Dash D Tailwind what you can see right here npm install ment CSS and here we say npx Tailwind CSS in it so now we install tailwind and what we need to do now is we need to configure the template paths that it means in this file right here which says tailwind.config.js you see content right here it hasn't any file specified there and we want to specify the kind of files where it's going to start looking for tailwind and implementing the classes and last but not least we need to add these Tailwind directives to our CSS and the best way to do this is to add it to our index.css file so right at the top and now we can start writing HTML with Tailwind CSS now to do that we want to jump back into our app and we already have this diff with the app which basically wraps around everything and in there we want to have another div alternative so we say div class name equals container and in here we want to have a heading and we say my model project as well as learn to create a reusable model with the reacting Tailwind I'm going to make the screen a bit more big for vs code and in the escort if this cool shortcut when the space isn't that big and you want to see everything that's inside your file you just press alt Z and then it will always wrap inside the window dude that you have opened let's save the file and we see my mobile project learn to create a reusable model okay but at this point we have written any Tailwind CSS yet so let's get started with that Terence CSS basically just means that all of the CSS you can write directly inside the HTML as a class name and it is super useful and handy especially for a project made in react or Vu or any other similar framework because right here you can define components and you can reuse these components so if you define the CSS at one point inside a component you want to make a change later it will change everywhere that you have rendered that component so let's get started by adding a background color to our app so going back to the documentation here if you look for color and then you can see that it has this customizing color Parts here where you find all of the different colors that are available for Tailwind now to add color a background color you simply say BG short for background and then the color that you want in this case I go for zinc right here and shade 300 so you say BG background zinc 300. now I had to restart the server because you need to First initialize tailwind and then start the project and I head it the other way around that's why it didn't really show Tailwind yet but now you can see that this gray background right here is in the background and the H1 and the paragraph they basically look the same so we have to style them right now and the app it doesn't span everywhere so we want to span it full width and full height in a way that we do that is that we say we want to span up the entire width of the screen and the entire height of the screen and boom now the entire app is gray but we also want to Center everything in the middle and for that we use flexbox and for flexbox we just say Flex to start flexbox and then we want to arrange everything as Flex column okay you don't see much difference right now but then the justify part is where the magic happens where we justify everything in the center and we also align the items in the center and now you can see that this diff right here is centered exactly in the middle so that's how easy it is to right Tailwind in CSS let's go to our container and we want to give it a background of white like this and we want to set margin and padding so padding is what what is inside of our container so between the text and the border so for that we simply have to say padding for for example for padding six and that way you make the padding bigger or smaller again you can always go back to the documentation simply look for padding and then you find a section with all of the different classes around padding now what if you want to have a different padding at the height and at the width so padding X the x-axis which is left and right we can say padding X is only four and padding Y is 10. and now you have a larger padding on top and on the bottom then you have on the left and on the right and for the margin we want to give it a margin 5 class which you don't see yet but you will see it later now right now as you can see this container always is relatively big but here it goes entirely to the sides and here it goes almost entirely to the sides but we want a fixed width and especially a fixed Max width in some cases so right now we want to say the width which you always get by is typing W should always be 9 12. and that way you will make sure that it's always 9 12 of the entire width you can also say 6 12 right so now it's half or even 2 3 whatever you want again you can go to documentation simply type with and then you will find it now lastly you want to make this look a bit more friendly so we want rounded Corners this is also very simple so we just say round it and then you say large or medium or small let's start with small you don't really notice it it's a very slightly rounded corn if you say medium it will become a bit more noticeable but I like to say large I find it looks the best when you have this large rounded corner now for the heading we want to change the text size and for that all you need to do is say text and then you specify what size you want if you say 3XL you automatically make the size bigger if you want to know the different sizes that are available you also again go to documentation and you say text oops I think it's font font size right here and then you can see how you can use these classes and we want to push this text to the bottom and how can we do that well simply by saying margin y so margin top and bottom of let's say eight now below here we want a button but we don't just want a regular button element instead we want a button component that we Define ourselves because that way we can specify it in one place and then reuse it with the same Styles in different places so in Source in our sources folder create a new folder called components and in here we create a new file called button.js and now I simply type FFC because I have this react syntax extension you can find it in the extension tabs and it's called Simple react Snippets this one right here so when you go back and you just have FFC it will create a functional component and you just need to type the name of the component in this case it's button and what should happen in our button well we want to have a button obviously and for now let's just say click me but we will change it later we don't see anything yet because we need to import that button into our app so we say import button and then you already see the autocomplete right here simply click it import button from the folder components and then button and now down here we can just say button and that's it now we have the button right here which we haven't styled yet now let's start by styling the button and then we will finish the functionality so again we want to have a background so in this case we will go with the background of Orange and 400 shade and now it has this nice orange color but it looks ugly right now so how can I change that well first let's change the text color to white which looks better on Orange and then we also want to make the text large nice and and padding X of 2 that's padding left and right and padding y of one as well as a margin top and bottom of six and rounded Corners This Time medium okay it does look like a nice button again right here you can simply press alt Z and then everything will wrap inside your view but then again maybe you want to have a different text and not just click me right here so for that we will have a placeholder here which we call text and as you can see there's a problem right now because we haven't given it the text yet so up here we will get it as a prop and as you can see right here it messed up a little bit The Styling so delete that and then add a closing button let me fix that like that but now we don't have any text in there so we want to say text equals and we pass in the text in this case open model because we want to use that button to open a model later and now the text that we passed in right here it was in this text prop and it is displayed right here so you can see it here but as you can see the button doesn't do anything yet so we want to use it to open the model and the way that we do that is that we Define a function to open and close the model so for that we need to use the use date hook so we create a variable called show model and set show model and we set it to use state and the initial state is false meaning in the beginning show model is false meaning we don't see any model and as you can see just by typing you state here it already imported use state from react at the top now let's define our function open model and for now we just want to say consol.lock opening model as well as set show model to true and later we want to close the model so we say consulted log closing model and set your model back to false now still this doesn't do anything you can see that open model and closed model they aren't used anywhere so to pass it on to our button we need another prop that we pass which we call Handler click and inside handle click we want to pass a function which is open model now inside our button component we now need to accept this handle click function and then on the button down here we attach an on click Handler and we say on click equals handle click so that way we can pass different functions to our button element depending on where we need it so let's check out if that works we open the developer console and if we press the button it says opening model okay that seems to work now let's continue with actually building the model so for that first we need a model component so in our components folder make a new file called moto.js and again I use the shortcut FFC and a create model and right now we just want to have a div which has model again we want to import it in our app so we say import model and then it also fills it here from components slash model and then we want to display it down below so for now we just say model like that and we see right here model that's the text that we defined here now just a second ago we created this function called openmoto so when we press it we want to either show the model or hide it and a way that we do that is we use the show model variable up here and we say only if show model is true so if show model it basically means if that expression evaluates to true then we want to show the model and if it's not true then we don't show it so let's see we start with show model as false when we press open model it will be set to true and then we will see the model great so we can jump into style our model and I will take away this modal word right here because in here we want to have another div which will be a container and in there we have text so we start by having an H1 my awesome model we loaded we have a div which we will use as a separator to make it look nicer and then we have an H2 which says made with Tailwind CSS and react and below that we just want to play some dummy text so in here I want to create some dummy text and for that I have an extension called lorem ipsum which is quite handy you can install it if you want and you just go back to the model and then Ctrl shift p you say lorem ipsum inside a paragraph and then you will see it inserts paragraph again press alt Z and it will wrap inside of your view and now you have this paragraph down here and the headings now again this doesn't look anything like a modal yet so let's style it with CSS and Tailwind so first of all we want to position it absolute meaning it's out of the flow of the body but it basically just sits where you want it to be and we want to say a top zero and left zero basically meaning it starts at the top where the top is zero and where the left is zero again we want to span the full screen and the full height of the screen just like that and we want to have a background color of BG zinc 700. now here's a really cool feature in turbines that often when you have a model you just want to have a sort of opaque background so that you still see a little bit of what's below it an entailment all you have to do is when you have this background property you say slash and then for instance an opacity of 50. so that way you see the background if you want to see less you could say for instance 70 or you say 20 if you want to show more this is really easy and handy now let's make the separation clearer so in this div right here I want to give it a white background so I say BG White and again padding of four to top and bottom and a margin of four as well and again we give it rounded Corners so it looks nicer now how can we make sure that the model always sits in the middle very simple we do the same that we did earlier with the app we say Flex and flex Direction column and then we just justify Center and items Center to align it exactly in the middle Isn't that cool now I personally don't like the way that the mode looks right now it's way too big so again entitlement it is very easy to say how wide something should be so we simply say as you saw earlier the width should be 10 over 12 and it should have a Max width of screen medium you don't see much yet because the screen is very small but once we make it larger that basically means it will never go beyond that width and what does it actually mean let's see width you have this property called Max width and if you scroll down here where all the classes are you see Max width screen medium means that it should never be more than 768 pixels but as you can see when we stretch the screen and we'll make it bigger maybe the model is a bit too big for us it shouldn't be as wide and what we can do right here is we specify a different width that should only be applied by any screen is medium or above so again these medium large terms they specify a certain number of pixels so right now when we say medium it should only be a width of 7 over 12 then right now you can see that it shrunk at the moment we make the screen smaller and we go below that Medium threshold then it goes back to 10 over 12. really cool right now let's finish by defining a shadow of 2XL and that way it sort of floats on top of the background let's finish up the styling and then we will make sure that we can actually close the model because right now you know once it's open it never closes for that we already make an anchor attack which we will use sort of as a button and we will just say well X right there and class name will be we will position it absolute and other right five but right now you can see it actually means it's absolute to the whole model and we needed only absolute to this white container right here and the way that we do that is that up here we have to add the class of relative so now this absolute is in terms to this relative container and not to this modal background up here and let's also increase the size a little bit text to XL and when we hover over it we want to show the cursor as a pointer cool it's either heading we say text for XL padding top and bottom of eight as well as a front of both then for the div right here we want to use it as a separator basically just a line that sits in between the two headings so we give it a background of orange for 100 uh width of 5 over 12. as well as the height of one and now we have this orange line now we want to center it in the middle so that we simply have to say margin Auto and there it sits right in the middle so the margin to the left and to the right is exactly the same and a margin bottom of eight to push down the heading below it alright here we say class name of text 2XL so it's a smaller heading we want to make it italic and give it a pattern to the bottom of six now lastly for our paragraph We want to have a different color now all you have to do is you say text and then you specify the color and Escape gray and then the shade of the color in this case 600 so now will be this dark gray and a padding to top and bottom of six as well as again italic down here we want to have a button to close our model and for that we again import the button component so when I type button here you can see that when I click on this it already Imports it at the top so we import the button component from our button components folder and we don't have any text in there so let's pass in some text which is click me and the function Loop actually want to pass in is we want to pass in a function called Handler model or handle click handle click now as you can see we don't have that function yet so we need to Define it here at the top and we say function handle click and then you can do whatever you want right in this in a real setting you would probably send some email or go to another page but for now I just want to say do something cool and then below it we want to close the model because usually once you click the button in the model you close it but now you can also see we haven't used closed model or we haven't defined it anywhere because closed model is already here in our app component so we need to pass in close model to our model and how do we do that very simple in our model we accept a prop called a closed model and now we can use it down here in our function handle click and to pass it to this model all we have to do is say close model close model and now when we click open model our model pops up and it sits on top of our app and if we click the x button here oh it doesn't do anything yet we will do that in a second if we click the button here it says doing something cool and then we'll close the model so let's do it again cool right now we also want to add a closing functionality to the X up here so we go back to our model component and here to this anchor tag we say on click equals I will also attach the closed model function so now we can close the model by clicking here or by clicking on click me but often that's not enough often you also want to just click on the background which right now doesn't work yet so let's add that functionality too and the way that we do that is we create new function called close model background click and it takes in an event parameter now let's first of all lock this event parameter and then we attach this on click Handler to our model div so the one that basically spans over the entire screen so we say on click equals then close model background click now right now every time we click on the screen an event is fired and now we just log this event so I click here you can see then there's this event click here and again I have this event so it has a lot of information we don't need all of the information but if you're interested you can always just look through it and you can use all of these different properties and values but we want to look for a property called Target so again let's check out what the event has down here you have Target and Target basically means whatever you're clicking on so target has many different properties and we can use Target to find out where we're clicking on the screen so let's say e dot Target for now we just print the target so here the target is this diff in the back here the target is our button here a Target is our heading now we only want to close it when we press on the background and not on anything in the white box in a way that we do that is that we give an extra ID to our model and we say model background for instance you can name it whatever you want now in here we simply want to listen for this Target and we want to see if the ID equals to the idea we just gave it which is modal background if it's the model background then we want to say clicked on the model background let's check that out right now you only see this one right here well delete it right now when I click you don't see anything happening but when I click on the background it says click on model background because now it knows okay only if the ID of whatever I click on has model background in it which is only the gray part then it will fire the event and what should happen when it fires the event well we want to close the model okay so when we press it now it will close our model so again if we open the model we can click anywhere in here we can close it by clicking here we can close it by clicking on the gray part and we can do some cool stuff by clicking on the button now if you want to make this model really reusable you wouldn't hard code the text in here you would pass in certain placeholders such as heading one and then you need to accept it up here as a property heading one and then of course it doesn't have anything yet so that's why it's empty because in our app component we need to pass in the property where we say heading 1 equals and then we just say my awesome model and then you can simply repeat that with the heading 2 and the paragraph part down here you can also add in images or whatever you like well that's our small model project I hope you liked it I hope you learned a lot and make sure to subscribe for the channel for new videos in the future and leave a comment down below what you thought of the video what you think of Taylor and CSS and if you use it in that way as well

Channel: The Coding Loft

Views: 238

Keywords: javascript, html, css, web development, learning javascript, front-end development, js react, tailwind, tailwindcss, react components, react basics, react state, how to create a modal, modal react, modal component

Id: sj2BgOKUE9M

Length: 28min 30sec (1710 seconds)

Published: Thu Mar 16 2023