How to use Material UI Snackbar Component in React Js

guys in this video I'm going to build a simple contact form using material UI and we are going to learn some new skills together in this video so I'm just going to show you how this contact form works and then we'll try to build it from scratch using material UI so in this contact form if I try to submit this it's going to give me error that email is missing and the error is going to be in red color and if I put my email and leave other fields Plank and try to submit this so it's going to check for the name and it's going to say name is missing and if I mention the name and try to submit this form then it's going to say another error that is message is missing and if I put all the fields and then it's going to say your form is submitted and it's going to be in a green color so this video is mainly focused on how to build these notifications if there is any error in submitting a form or the form has been submitted successfully so we need to give some notification to the user at the end and we are going to build this notifications using material UI so stay tuned till the end of the video subscribe to the channel if you haven't done so now let's go to the visual studio code and start coding this so guys I have a fresh react application and we are going to build this project here before we start coding let's have a look at Material UI documentation so I'm just going to give you an overview of what are the steps that we are going to follow to build this project so here in material UI documentation the first thing I'll do is I'll install material UI into my project using this command here so after installing material UI I'll be using some components from this list here so I'm just going to be using a text field components to build uh the basic contact form as we have seen seen in the original project here and to build this submit button here I'm just going to be using a button component from Material UI so you can explore the documentation there are many kinds of buttons here and there are different kinds of text Fields you can use to build the form but I'm just going to be using a basic ones here and after we have built the entire contact form using text field and the button we'll be using some feedback components to build the notifications on the form so one is the alert so if you explore this you can see that we have a many different kinds of alerts here but we are going to be using this alert along with this snack bar so I'm just going to head over to my snack bar here so if I scroll down I can see that if I click on this there is a notification coming from the side and if I look at all other kind of notifications we can also decide from which side this notification is going to be pop up so if I choose top center it's going to be at the top and if I choose top left it's going to appear here and the bottom left is going to be here it depends on the UI of your project object which one you're going to use so we can also choose bottom right so in this video I'll be using a top Center but you can use any of them as you like so if I scroll down a little bit I can explore all all kinds of snack bars that are available here because I like these kind of snack bars where they have alert component that is inside the snack bar so this is a one I'm going to be using in this video but you can pick any from the documentation and use it so now let's go to the visual studio code and start using all these components so I'll go to my project here so I'll just remove all the default code here and save it so after removing all the default code I'm also going to open my terminal and install material UI into this project so let's have a look at the documentation and if I go to my installation section so here I'll copy this command and use it to install material UI so let's install material UI here so now material UI has been installed in this application I'm just going to import some components here from Material UI so I'm just going to import button from Material UI and text field we are also going to need a alert component and a snack bar so I think these four components should be enough to build this project so I'm just going to change my class name to container here and I'm going to apply some styling to this container by using a style tag and inside this I'm just going to apply container Styles and we can create container Styles here at the top and this is going to be display Flex I'm just going to mention my Flex Direction and it's going to be column so between all the elements that I'm going to place in this diff tag I'll just assign some Gap to them and the Gap is going to be 20 pixels and we are going to align all those items in center and we are also going to justify our entire content in this div tag to Center so these two properties are basically going to align all the components that we are going to write in this container in the center of the page horizontally and vertically both and I'm going to say that this div tag should have a height of 100 VH and let's assign a background color which should be black let's save this let's put a div tag here and just say Hello World in this div tag for now let's go to the application and see how it's looking on the front so we can see that our hello world D tag has come in the center of the page but the background color is not working for some reason because we have made a spelling error here so I'm just going to fix my background color actually I'm assigning a background color just to check that my d tag is having the entire 100 VH height we don't really need a background color here so I'm just going to comment this let's save this so now we can see that any component that we are going to place in this div container is going to appear in the center of the page horizontally and vertically so I'm good to go now I can start building my contact form here so I'll just place my first text field here and I'm going to assign a label to this text field and the first text field is going to be the email and I'm also going to assign ID to this and the ID is going to be email and to this text field I'm also going to assign some styling so I'm just going to use a FX tag in material UI to apply The Styling here so here I'm just going to say styles. text field and here we can create a object that is going to be Styles and inside the Styles there is going to be the text field Styles and to the text field I'm just going to assign my width which can be 300 pixels now let's save this and see how it's looking on the front end so this is our email it's looking perfectly fine so now I'm also going to put some on change function on this text field and this function is going to be handle change and above the return I'm just going to create a handle change function let's leave it blank for now we'll come back to this but before that we are going to complete our contact form here so I'm just going to copy this text field and create one more and this text field is going to be the name and the label will be name and the last text field that we are going to need in this form is going to be the message and we can assign the label as message so we have all the text Fields here but the last text field I'm just going to make it multi-line because the message can be long so we are going to make it multi-line and we are going to say that rows of this text field should be four let's save this so now if I go back you can see that I have email name a message text field and this message text field is having four rows so I can write a message as long as four rows but now we are also going to need a button at the bottom so I'm just going to go back place my button component here and this button is going to say submit I'll put a variant as contained on this button and I'm also going to put some stylings here by using a style tag and this is going to be taking styles do button we already have a Styles object at the top where we have defined all the text field Styles so I'm just going to add more to it I'm also going to add styling for the button here so my button width can be 100 pixels and I'm just going to assign a background color to my button so the background color of this button can be black and now we have all the styling on the button I'm also going to put a on click function here and this onclick function is going to be handle submit so basically when somebody clicks on this button we are going to run a function that is handle submit which we are going to create here so this is our handle submit function as of now we can just leave it blank we'll come back to this so now let's look at the front end if everything is looking fine so now we can see that our contact form is looking basic fine and we can probably increase the width of all these text Fields so I'll go back to my Styles object here and increase the width of my text fields to 400 pixels so I think 400 pixels is better so now we are going to work on the handle change and handle submit functions for this text fields and the button so when we type something into our text fields we are going to need a state variable in the application to save all this information so let's work on the handle change function first so for the handle change function I'm just going to need a State variable in my application and the state variable is going to be data and set data and we are going to save all the information that user is going to enter in the text Fields here in the form of object and that is going to save a name email and a message so the initial values on name email and message can be blank so let's go to the handle change function so on the handle change function we are going to receive event and we have assigned IDs to each and every text field here we can see that ID is email name and message so here I'm just going to write some logic that if my event. target. ID is going to be email so I'm just going to set my data to whatever the data is and I'm just going to change the email to event do target. value so same way I'm just going to copy this two more times and if my event do target. ID is name so I'm just going to save my name as a value whatever I'm receiving from the user and if my event target. ID is message so I'm just going to change my message in my original data so that's all we are going to need for the handle change function which will be storing all the data that user is going to enter in the text Fields into our data variable that is a state variable in this application so now we have to start working on the handle submit function so when somebody will submit this so this function is going to be fired that is handle submit function so when somebody will submit the form I'm just going to check my data first if my data. name is blank I'm just going to alert that name is missing let's check a email first so if my data. email is equal to blank so I'm just going to alert that my email is missing so same way I'm just going to copy that twice and after it has sent the alert I'm just going to return none of the code after my return statement is going to run so first it's going to check the email and then it's going to check the name so if the name is blank it's going to say name is missing and if the message is blank it's going to say message is missing and after every alert we are just going to return but if none of this is missing then I'm just going to alert that my form has been submitted so let's save this and see what's happening on the front end now with the help of this handle submit function we have created some basic alerts using a JavaScript alert function so let's have a look at the front end how this form is working so here if I try to submit this form it's just going to say email is missing so I think this logic is working fine so if I put my email and try to submit this now it says name is missing so if I put the name as well and try to submit it's going to say message is missing so if I submit everything and try to submit this now my form has been submitted so now our basic form is working perfectly fine so this is where we are going to start improving the design of this notifications using material UI so I'll go back to my material UI documentation and go to the components let's find the snack bar component here so here in the snack bar component I'm just going to to scroll down and as I scroll down I will find a section where we can use the snack bar component along with the alerts so that's the kind of snack bar I'm going to be using in this application so here in material UI I'm just going to expand the code so here if I look at the bottom I can see some chunk of code that they're using for the snack bar so let's copy this chunk of code from here and put it in our application I'm just going to put it after my button so that's all good we can see that the snack bar component is using uh variable that is open and it's also using handle close function so I'll go back to the documentation so here we can see that there is a handle close function I'm just going to copy that and paste it in my application and as of now we do not have this open variable in our application if we look at the documentation here they have a state variable here that is open so if I copy that as well and go back to my application I can just copy it here so initially my open variable is false so if I go back to the browser and see this application we can see that there is a Minor error here react is not defined so we are just going to fix that I'm just going to import react from react so this is going to fix the error but as of now we can see that we are not able to see any notification that we have placed after the button this is because by default our open variable is set to false and here in the snack bar we can see that we are passing the open variable so if the open variable goes true then only we'll be able to see the snack so I'm just going to set manually to true so this is how it's going to look we are going to customize it bit more like we will need to change this message and the color of this snack bar based on whether our form is submitted successfully or something is missing like email is missing name is missing so I'm just going to make the color of the snack bar and the text inside the snack bar Dynamic so as of now this is a static text and the color so if I go back so here in the snag bar this is going to be the message that's going to be displayed on the snag bar and the the color is being decided by severity so if I set my severity to error it's just going to display it in red color and if I change it back to success it's just going to display it in green color so we are going to make these two Fields as Dynamic using our open variable so I'm just going to change it to open back again so guys I'm just going to make some changes in the default code that we have copied from Material UI so I've created this open variable as true or false but this time I'm just going to create it as a object and this is this object is going to have three properties one is open and the initial value of open can be false and it's also going to have a message that we are going to pass in the notification and the initial value of the message can be empty string and let's create another property that is severity that is going to decide in which color the notification is going to appear on the screen so the initial value of this can be success which is a green color basically so we have made some changes to the open variable so we are using the open variable in our snack bar here so here in the snack bar I'm just going to say that it should open if my open do open is true and the message that is going to display here is open Dot message and the color of the snack bar is going to be based on open do severity so whatever we set our open variable to be that's going to be displayed as a snack bar so now when somebody tries to submit this form we have a very basic kinds of alerts here all we are going to do here is we are just going to replace this basic alerts with the material UI notifications and this notification is only going to show on the screen screen if I set my open variable back to true so I'm just going to set my open do open to True here but if my email is empty then my message is going to be email is missing and severity of this is going to be error if I mention my severity as error the notification is going to be appearing in the red color on the screen so I'll just copy this and paste it here so if my name is missing I'm just going to say name is missing and I'm also going to copy this here if my message is missing so I'll just change it to message is missing severity is again going to be error and if user is submitting the entire form then I'm just going to change my message to form is submitted and severity is going to be success this time because this time the form is actually submitted without any errors so now we are all done let's go back to the application and test this logic so here in the application if I try to submit this I can see a notification in red color which says email is missing so if I put my email and try to submit this so this time my name is missing and if I enter my name and try to submit this the message is missing but if I enter the message as well and try to submit so this time my form has been submitted successfully and the last thing that I going to cover is that how to move the location of this notification so as of now my notification is appearing in the bottom left I'm just going to move it to top Center so to do that let's go back to the code and here in the snack bar I can add one more property here that is Anchor origin so in this property I'm just going to pass up object that is going to say vertical top and horizontal Center so this is basically going to move my snag bar to top Center so let's save this go back to our application refresh it so now if I try to submit this form my notifications have moved to the top of the page so that's how we build the notifications using material UI snack bar component so if you found a value in this video subscribe to the channel leave a like on the video and I'll see you in the next one

Channel: Mitter - Your Tech Mate

Views: 191

Keywords: react js, react material ui, mui snackbar, material ui snackbar react, material ui tutorial, mui react, material ui react, reactjs project from scratch, material ui project, material ui alert, material ui 5 tutorial, javascript

Id: O52L5w3NGJ0

Length: 16min 56sec (1016 seconds)

Published: Mon May 27 2024