Create A Toast Notification Component With React

[@alexandrurosu7724]

I came here looking to learn about toasts and ended up learning about folder structures, custom hooks, portals, refs, forward refs, imperative handle, closures some really good practices. This is an amazing tutorial, hope to see more like this in the future. Thank you!

[@awuk3468]

I've been using React for a few years now, JavaScript for many, I have just realised that I have no idea how to do things properly in React! I've used state, effect, ref etc, but never used forward ref, portals, or memo, and that export in each folder makes it so much cleaner! Thanks for the video, I have learnt quite a bit from this alone.

[@Moog_us]

This may be the most underrated youtube video I've seen in my life

[@Ayydos]

Bro is a react god. This is an interview question and now I can see why.

[@mickaelrichard7255]

I got scared when you say it will be a more advance app but I actually found it easier than your chat app :) Your explanations are getting better with each new video you make thanks a lot!

[@musicmoi]

Very grateful of how you can easily explain more intermediate and complex concepts to such a beginner like myself. Some things went over my head, but too be expected. Overall fantastic tutorial!

[@haha-eg8fj]

A very good tutorial about the advanced features of React. And the useRef/useImperativeHandle/forwardRef topic is indeed alien to me. It is very tricky at the beginning and I have to go back to watch a few more times to grasp the idea of the concept and its usage.

[@be2wa]

Love the pace.

[@cozybird724]

I was able to learn a lot from this video! Thank you!

[@franciscofunes558]

Great idea! Looking forward to code it , always learning something new!!

[@АнтонСтрока]

auto close method save my work day ! thx !

[@rodsmade]

if anyone's had trouble with absolute imports as I did, I found that going into package,json and modifying the start script from "start": "react-scripts start" to "start": "NODE_PATH=src react-scripts start", (adding an env variable referencing the src folder) solved the problem for me :) (also deleted the jsconfig.json file)

[@soltiscd]

Really good. Very good explanation and approach. Would you consider doing something with Material-ui, yup and forms? It gets really cumbersome with styled components and when you reuse a MUIeditedconponent. Cheers!

[@MightyKingKala]

Thank you ❤️

[@mansukhkaur9494]

How can we stack toasts below each other? USE CASE : another event triggers before the previous toast has been closed. How would it appear? Edit: I just watched the whole tutorial, its there! Thank you so much!

[@kaykay4130]

great video, thankss

[@justintagorda704]

What a great video, just wondering how can i implement it on other page? i need to import the toastportal on each page? because it relies on useRef per page

[@rodsmade]

Hi Zack, is it actually possible to pass in the toastRef to a child component so that a toast can be created from elsewhere other than the app? i'm working with authentication and different pages and am trying to implement the One Toast Component To Rule Them All

[@rodsmade]

okay i managed to implement this using Context to anyone wondering.

[@arwinnandu5948]

@@rodsmade do you have the source code and if you do can you share it with me?

[@rodsmade]

@@arwinnandu5948 i don't sorry :/ i remember i followed tutorials on useContext, which sort of adds "global variables" to your application. hope this helps somehow

[@nocodeandcodeph4449]

I love the color of the IDE, 🥰. What theme is that?

[@mehdadhussain9744]

Is there any way around with out create index.js in every folder under component folder, with only one file ?, thanks a lot, great tutorial.

[@danielcsmariz]

One thing I've missed from this tutorial is how to trigger a new toast from and app inner component since the ref is inside the App

[@MarvinCollins14]

am strangling with the same concept, but he mentioned you can use context api

[@tienlx97]

you can use context api and wrap ref inside, or wrap all function in toast

[@ariannecanlubo8038]

Great video! btw what's your VS code theme here? :)

[@PortEXE]

Laserwave

[@mr.javascript1320]

Amazing video....Jst LOVE YOUR CONTENT !!! if i was gay i would smooch you for making me smart

[@PortEXE]

Lol! Thanks. Appreciate you.

[@satindersingh9671]

useImperativeHandle(ref, () => ({ addToast: ({ message, mode }: ToastProps) => { const toastId = uuid(); setToasts([...toasts, { toastId, message, mode }]); 👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽👇🏽 if(autoClose) { setTimeout(() => { setToasts((toasts) => toasts.filter((toast) => toast.toastId !== toastId)); }, 5000); } }, })); Then no need for the useAutoClose hook because setToast will receive the latest toasts from prev state. 😀 Thank you for the great video as always and please start making videos again 🙏🏼. You are the best.