React Toastify: Popup Message Library

every now and then you run across a small tool or library that fixes some particular use case in a really smart way and that's the case with the react toastify if you're a react developer and you need to show some kind of toast message then I highly recommend jumping into react toastify not only can you pass along specific messages like a success message or a warning message but you can also use it with promises so that if it succeeds you show one message and if it's rejected you show a different message now it's really easy to get started and they actually have a little interactive tutorial here on their site where you can actually test it out yourself so here I am I've got all this stuff set up the way I want and then I can just show toast and see it right here now I've got it to where it pauses when I hover over it in fact I also have it when I pull off the tab it actually is going to pause it so when I move back it's right where it was at I can dismiss it myself I can drag it off all these things are options here's the promise one it's pending and then finally it's going to either succeed in this case it did or it would fail there's a bunch of smart little features included in this and I want to show to you now let's Jump Right In [Music] hey what's up my name is Chris and welcome to coding in public let's go ahead and start a react project from scratch to kind of show you how you would get this set up so I'm going to say npm create Veet at latest and let's go ahead and get this up and running we'll call this toastify and then I do want to use react and JavaScript is just fine all right so let's go inside toastify and I'm going to npm install it and then let me go ahead and open this up in vs code and I'll be right back with you all right I've got vs code open and the docs over on the right let me go ahead and just install react hostify and let's see let's grab it right here since I'm using npm and I'll install this and now that's really all you need to do it's really easy to get started with you can see that you got to do two things one is you have to add a toast container somewhere in your application you'll just do that once and then to show a toast you simply call the toast function so let's go ahead and get this folder up and running let's see let's see what the default comes with it looks like we can click on this button and increment the count so let me let me go ahead and get this thing up and running with npm run Dev and then I'm simply going to grab this right here this toast container and maybe the best thing to do if I'm going to use this throughout my application is just to add it on the actual main tag right here once again you only need to add toast container once in your application so let me go and just add it down here and then I can not import toast because I won't need it right here but I do want to go ahead and import the CSS which you can customize and I'll try to remember to show you that as we get going okay so now it's actually installed and ready to go let me open up the project and now let's actually use the first toast function so over here what I'm going to do is when I click rather than increment the count or maybe in addition to incrementing the count we can actually show a toast message so let's come back over to the app.js I'm going to close this down and I'm going to go ahead and paste back in that import and in this case all we need is the toast itself so with the single toast container component already on my page now I can simply reference this toast function so to keep everything in line let's go ahead and just do this inline down here rather than returning set count let's go ahead and do set count and then also show a toast so the toast I could say something like cool beans all right I'm not sure what that's about but here we go I come over here I click on this and I should see cool beans all right so there it goes that's at its most basic you can customize this in a bunch of different ways like we could show the different counts we could customize the actual experience and to do that the easiest way is really to run over to their doc examples and just play around with the different options available to you now you can do this in a couple different ways if you always want the toast to always show the exact same way then you can actually set all of these different properties on the toast container however you can also just use the toasted Knitter this toast function and pass them in to kind of override those so what I'm going to do is just worry about setting on the toast itself rather than the toast container that way we can be really flexible and I can show you a bunch of different things all at the same time the default I think is what we've got right here which is what you just saw but you can see that I can set it top left top Center bottom right whatever I want I can show different kinds of messages depending on what I want to show I can show a theme of light or dark mode I can decide whether or not it closes automatically how it transitions in the progress the limit if I want to hide the the progress bar that goes along the bottom close it on click all of these things are options so let's go ahead and disable auto close Let's do let's pause delay on Hover let's take that off I'm going to update this and then show a toast message this is what it looks like now based on everything that I did I can actually drag it off because I've got it set right here I guess I have to drag it to the right okay good to know so I've got here on warning let's go ahead and change it to error or maybe success and let's go back to light mode put it top right show toast one more time and there we go up top here again I can drag it off to the right and everything works properly so let's say I wanted it to be like that let's do a multi-colored one and let's go back to the default what I can do is just actually copy all of this and this is just an options object you can pass in so I'm going to go ahead and do that after my message then I'll just pass in this and now if I jump back over to my app and I click this and there we go so those are the customizations it's not going to Auto close because I've set set it that way I've hidden the progress bar all that so you can customize it to your heart's content and really the easiest way is just to play around with it on their site now let's go and refresh to get rid of that so it's not going to Auto close and let me show you a couple of other things I showed you in the intro the way that you could work with promises here so I can actually pass it a promise and when it's pending it will be pending when it rejects it will show a rejected message sometimes it will show a success message if the promise is successful hopefully most of the time it will show it that way now when would you use this well let's say you're submitting a form and you want to know whether or not that submission was successful so that you can tell the person hey we got your submission or hey we didn't get it that was a problem you could do all that with this nice little toast function so let's go ahead and come down here and when I pass in toast I'll do toast Dot and then I can pass in promise now just to make sure I get this right let me jump back over to their docs and let's see I guess I will search for promise handling promises here we go and I suppose rather than Reinventing the wheel let me just go ahead and copy this out so I don't have to do it myself and let's add let's see let's just add this one up here you can see I could do toast.promise then I pass it some promise now in this case this would be like your submission thing now you're not going to pass await the promise you're just going to pass the promise itself it will handle all of that state for you so I'll pass it just like this and here we go then I'll pass it three different things first of all I will pass it a pending message so this is when it first submits it we're waiting back on that promise then a success message and finally an error message so let's come over here and maybe for this success message I pass it something like count is now and then I do count now in this case I think that count is going to be one step behind but just to show you how it works if I click on here it says count is now zero even though it's now one that's because the way that react handles this state so maybe I could extract this variable out or maybe we just do count plus one to be be lazy right now all right so countless one how about that all right so it'll basically just tell me hey promises pending promises pending count is now two not that I couldn't see that down here now if I were to reject it for some reason so let's come back up here and let me pass a reject message and now in this case I'm going to reject it so let's go ahead and click it after three seconds or however long this says it will now reject it and I get my special message just for that promise being rejected so super helpful when you're working with promises and I just really like the functionality of this couldn't be easier now one thing to note real quick and that is how to customize the CSS so let me come over here and let's see override CSS variables so this is the easiest way I know of to override stuff you can actually just set the CSS variables for any of the different things you want to do that also means that if you change State between light and dark mode you can just pass this your custom CSS variable however you're writing your CSS and it will work for you just fine so to briefly show you that let me go and just grab this let's open up our CSS file I'm assuming there's something like this app.css that'll work and let's go ahead and add this to our root right inside here let's pass it some different color there we go some kind of pink color I should be able to come over here and I think I've got it set at light oh no I don't all right so let's change that back uh let's go backwards all right there we go I think we are now in light mode and since that didn't work let me come down here maybe I need to actually set this to light mode one thing I forgot to mention is that this is all tight so just to control and space opens up different options you have available to you so let me set the theme and let's see I've got light as an option and I think if I did all that correctly I should be able to come over here and click and no I still am not getting the right color so let's come back over here and let's make sure we figured this out together you can see there are options only for like the colored theme or how to actually set the progress bar linear gradient across one to the other all right looking back up here it looks like I'm actually using the right variable I wonder if I just need to do it in my main JS file but this actually gives me a chance to show you another way to customize this so let's do that first so if I come back down this way not only can you actually override it depending on the different um like the different things that are being shown like the position of the icon which kind of notification is being shown you can actually customize it really specifically like that but you can also build out your own styling based on the SAS file if you want to you can also actually pass in Styles directly to the component in this case you're passing it into the toast container that's kind of overriding everything and I think that's the problem I've got showing over this way you can also do the same thing over here so you can actually pass in different styles based on what you want for like a class name for the background so this is super helpful if you're using Tailwind for instance you could pass in these specific things to it and it will just update it based on whatever tail and theme you're using and your color theme you're using and you can pass it in directly to the test container you can also use it as a function so here you've got this object being declared and again they're using Tailwind here just to show you how this works and then you actually pass it in as a function instead here body class name and you're telling it hey these are the things I want you to use the documentation is just great on this you've got style components as well if you prefer to do it that way here they show how to pass in CSS classes to props you can also style the entire thing from scratch or even inject your own Styles onto demand you just have to call this function inject style that you import from react toastify super easy to work with so let's use just one of those different options that we saw to kind of overwrite this and get this working the way we want let's come inside here we're going to add a style tag and pass an object where we set the background color to something like pink now if I come over here and click maybe there we go the background that that's for the entire toast container you can see that that's what we can set the style on because this is the actual react component but I just wanted to show you how that is done all right so let's back out of this now all right so let's figure out exactly what I was doing wrong over here let's see again I think I am grabbing the right thing but I'm adding it in this app CSS and I wonder if I should be adding it I think it's being overridden by this import down here so let's go ahead and make sure that this shows up after this uh the CSS import right here then I'm going to go ahead and open up my index.css file and let's go ahead and add it down this way and I think that should work so just a specificity problem if I click here yeah there we go so now we get this ugly color but you can see how it's easy to override those assuming that you actually pay attention to specificity well I hope this has been a helpful quick introduction to a tool that you may not have known about that you got a understanding of how to manipulate it to get it to do exactly what you want and even how to get it to properly show the CSS you want it to show well thanks so much for watching I'll catch you in the next one happy coding

Channel: Coding in Public

Views: 11,933

Keywords:

Id: 7CcAKre3Ifc

Length: 11min 52sec (712 seconds)

Published: Tue Jan 31 2023