Ant Design Alert and Message component usage in ReactJS app | AntD Message and Alert Tutorial

welcome back so in this video we will be extending the feature we developed in last video we explored the form in the last video and i have added the link in this description so if you have not gone through that video please have a look on that video and in this video let's add some feedback to the user after user has entered the login information okay so let's mimic the behavior of a api call here so follow by using reset timeout so after two seconds we will now say that the login was successful so we will be adding a message here let's try message and message dot success so we can say that login is successful okay so user press on the login button wait for two seconds and logins class and it is auto hidden so it will be hidden after some time and you can also pass the time durations was how many how much time you want it to be stay on the ui suppose if the message is very long and you want it to be stay long for a long time and you can also pass the third parameter as on close so it is a callback when the this auto closing message is closed and there are other types of message as well this was success and if suppose you want to show an error login field suppose and gonna pay call and login field and suppose if there's any warning you can give one on any event okay so that was the auto hiding message so user do not have need to give any feedback on that so user cannot close it so if so there is another type of message on which user can it will be it will stay on the ui until user closes it or it can stay on always based on any variable value or any the parameters you got from the api okay so let's try to implement that that is called an alert so suppose we use your state and login success suppose by default also you can say show a lot see and set charlotte and but it is false and suppose after two seconds we say set show alert to and suppose um here we check if the show alert is true and then we will be showing the alert with the type of suppose error and it's its message will be error and you can see within an optional description there was an error right and let's save it used it is not defined let's add it import use date from react all right suppose you get a username and password hit login and after two seconds it shows an error message and right now it will stay here and if you want it to be closable you will add a drop here so now if you hit the login it will show the error and it is closable so pressing on the cross button it will close so that's it on the messaging so if you have any question please let me know in the comment section and in the next video we will pick another topic from the and design components stay tuned see you there thank you

Channel: CodeWithAamir

Views: 18,913

Keywords: antd, ant design, reactjs, website ui development using ant design and reactJS, ant design components in reactJS website, how to use Alert component of ant design, website feedback UI component of ant design, Ant Design Alert and Message component usage in ReactJS app, antd alert, antd message, antd success message, and error message, antd alert message close, antd alert message type error, codewithaamir, antd reactjs, antd react js tutorial, antd reactjs feedback, autohide message

Id: uS6KjRHkAZg

Length: 5min 51sec (351 seconds)

Published: Mon Mar 22 2021