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:

GitHub Code: https://github.com/WebDevSimplified/live-toast-notification-library
React Toastify Library: https://fkhadra.github.io/react-toastify/introduction
ES6 Modules Video: https://youtu.be/cRHQNNcYf6s
ES6 Modules Article: https://blog.webdevsimplified.com/2021-11/es6-modules

Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ 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