⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
https://netninja.dev/p/chakra-ui-crash-course
?? Access the course files on GitHub:
Course files –
?? React Tutorial:
On Net Ninja Pro –
On YouTube –
?? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
?? CSS Flexbox Tutorial:
On YouTube –
?? CSS Grid Tutorial:
On Net Ninja Pro –
On YouTube –
?? Chakra docs –
?? VS Code –
All right then so in this lesson we're Going to look at another component which Is the toast component and a toast Component is like a little pop-up that Appears when you do something on a Website it might be that you've Successfully added something to a basket And you get a little notification to say Yep that's been added successfully or Maybe if there's an error doing Something you might get a little error Toast and it looks something like this If I click on this it's going to pop up At the bottom we get a little Notification and we can cross off it as Well so that's what we're going to be Making in this lesson so to do this I Want to attach it to this button right Here so when we click on this we get a Little message up here to say something Like yep you've logged out successfully Now we're not really using any kind of Authentication system we just want to Implement that toast component so let's Go to the navbar component to do this so The way we create this component is a Little bit different than other Components we've seen we actually need To use a hook from Chakra instead so That hook is called use toast and we're Going to store that or the return value Of that in a constant cold toast but you Can call it what you want but we set it Equal to use
Toast Like so click on that to import it up Here all right so this returns to us Another function and when we invoke that Function it's going to show the toast Now I want to invoke that function Whenever we click on this button so what I'm going to do is add a click event to This I'm going to say on click and set That equal to some kind of function now The function we're going to create up Here and it's just going to be show Toast so const show toast is equal to a Function Like so and all we're going to do is Invoke that toast function right here Inside it so I'm going to say right here Show Toast Like so so now we're firing this Function when we click on that button And we're invoking the toast function as Well now inside here as an argument we Pass an object and this object takes Different properties to configure toast So we need a title object or a title Property sorry and that's going to be The title at the top of the toast so I'll just call that logged out or Something After the title we'll do a description So this is some text below the title on The toast and we will say successfully We can spell this I'm not sure how to
Spell successfully too many essays too Many C's and we'll say logged out and Then after that we'll do a duration this Is in milliseconds so we'll do a Duration of five Thousand milliseconds and then it's Going to disappear after that and we'll Also say is closable now if this is False we don't get a little cross that We can click and we just have to wait For it to disappear if it is closable if We have true for the value right here Then we get a little cross okay So I'm gonna leave it there for now just To try this out so far so let me click On this and you can see now down here we Get a little blue toast we get this Logged out message successfully logged Out and across to click it off now if I Don't press the cross there we just have To wait about five seconds which is the Duration property and it fades out Automatically awesome I want to change a Few things about this I want to change The background color now the way we do That is actually not using a background Color property or anything it's just by Using a status so I can come over here And we have different statuses and we Can use something like error or in our Case we're going to use success and that Should color it green I also want to Change the position of the toast and we Can do that using a position property
And that's going to be set to top in our Example so let's save that and try it Again Or log out and now we can see it's green And we get this message we get the cross As well everything seems to be working It's up here as well which is nice so You can change the position the color Via the status Etc Now if you want you can also customize This icon right here this is a tick by Default for success but if you want a Different icon you can do we can say Icon and then use a different icon I'll Use the unlock icon I'm going to click On this to import it at the top and the Unlock icon is like a little lock that's Been unlocked so it's like you've logged Out or something I don't know click on This and now we can see we get that new Icon so that's how simple it is to Create these toasts now you can change The colors of these by changing the Default theme we're going to talk about The default theme later on and how we Update the theme but you do get a range Of colors by using those different Statuses now if we go to the docs and go To props you can see all the props and Stuff you can pass into this so all These different properties right here And you can scroll down and take a look At these we've got description and we've
Got duration icon ID is closable on Close complete so you can run some kind Of function when it's closed all these Different things right here these are The statuses so we have info warning We've used success error and loading Etc So definitely have a play around with These
