Can I Create A Complete Toast Notification Library?

Toast messages are one of the more common styles of messages to add to your application, but it can be pretty tricky to implement all of the necessary features. In this video I will attempt to create my very own toast library based on the React-toastify library. This is a large projects, but is also incredibly fun to work on and a great overall project.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00:00 - Introduction
00:01:52 - CSS
00:09:41 - JavaScript Setup
00:14:05 - Add/Remove Toast
00:19:35 - autoClose Option
00:23:35 - Update Function
00:25:48 - onClose Option
00:27:29 - canClose Option
00:33:48 - CSS Animations
00:43:10 - Progress Bar
00:53:38 - pauseOnHover Option
01:16:06 - pauseOnFocusLoss Option

#ToastNotification #WDS #JavaScript

[fdkhadra]

Hey, react-toastify author here. Really liked the way you reverse engineered my library 😊. Keep up the great work

[TheDarkOneSC]

This is brilliant I love this new format. It just shows the real thought process and the problem solving required which lacks in almost every other coding tutorial.

[iTzBoosTerZx]

Did i just watch a 1:24:00 video on a language I rarely use, yes.
Am I gonna create my own version of the Toast lib, probably not.
Did I love every minute of this video, hell yes.

[cipher]

Kyle... thank you so much for sharing your thought process - especially for this kind of project. I'm currently working as a frontend developer, and I've always wanted to get more skilled in animations. When I saw this video I immediately jumped out of joy. I understand most of the concepts in your video now, and I've started implementing this for a notification toast in a project at work. It's super dope! Thank you so much.

[FukSN]

Very nice content.
The value of the thought process behind how the code is written cannot be overstated.
It also helps that the code itself and the Toast notifications are super useful.

Thank you. ✌

[JARVIS]

Even after being a Web Dev for 10+ years, I still learn new stuff in your videos! Love that! :)

[mvrius]

you're awesome, it's so cool to see you working on this type of projects

[CodingWithJan]

I really enjoy this format, it really shows how powerful vanilla JS is.

[karsongrady]

This was really awesome. I keep saying it but these continuous real-time videos are so entertaining and interesting. Looking forward to more!

[tompomarede]

Great video as always, thanks ! I love that you don't cut the video and show your whole thought process, very instructive.

By the way, I think it would be a good idea for a future video to show how you would go around publishing this project as a NPM package.

[kjn]

I hope you continue to do this type of content. Personally I improve a lot of my fundamentals when making my own custom components, library and such.

[DarkFlarePrince]

Please do more of these. It's really helpful to see the whole process.

[joseoropeza]

Super cool to see a tutorial on toast notifications. Can’t recall seeing any other and you’re content is always great.

[rohanveer]

This is really awesome. I've never seen thought process in any other tutorials. Post more content like this. Thanks.

[HeyNoah]

This was awesome! Hands down my fav type of videos from you create! I mean the others are great, but I love this more real-world, real-time problem solving. Great! Thanks!

[StefanVosloo]

Great video! Loving seeing the full thought process.

[iamrajthomas]

You always bring something interesting and new to the table. 💚 Amazing approach.

[CyberTechBits]

Phenomenal! Always love your content... some of the best on the web! I build my apps in vanilla and this proves how powerful vanilla is! Props!

[utvikler-no]

Dayuuum! So much more informative when its used in context .. Learned a lot! Thanks! Eg: spreading the default options .. Never had a use case for it until now. Can use it in all my projects 😀

[yamogebrewold]

I had a very similar idea to this before, but I wanted to create my own React library for toast notifications since I don't like the popular ones. Thanks for the video, it gives a lot of inspiration!