Create A Toast Notification Component With React
HTML-код
- Опубликовано: 14 июн 2024
- As it turns out.. creating a decent toast component with React is actually a bit more advanced than it might seem at first thought. In this video we design, architect and code a toast component for React using intermediate to advanced concepts such as: React Portals, Closures, Memoization, useImperativeHandle, forwardRef and more.
#React #PortEXE #PortalsAndToast
0:00 Intro
1:26 Set Up The Project
7:57 Form Boilerplate
11:30 Architecture
13:12 React Portals
17:20 Toast Portal
36:25 Toast Component
46:35 Closing Toasts Manually
48:05 forwardRef and useImperativeHandle
1:01:25 Auto Closing Toasts
1:12:54 Conclusion
LINKS:
🔗Intro App.js Boilerplate Code:
gist.github.com/portexe/3716f...
🔗CSS For App.js Component:
github.com/portexe/PortalsAnd...
🔗CSS For Toast Portal Component:
github.com/portexe/PortalsAnd...
🔗CSS For Toast Component:
github.com/portexe/PortalsAnd...
🔗Toaster SVG: github.com/portexe/PortalsAnd...
🔗UUID Function:
github.com/portexe/PortalsAnd...
🔗Final Source Code:
github.com/portexe/PortalsAnd...
🔗My Scrimba Course:
scrimba.com/learn/trickyjavas...
🎵 Music by Moon Wash.
songfuze.com/artist/moonwash
---
👀 Follow Me:
Twitter ➔ / portexe
Instagram ➔ / port.exe
GitHub ➔ github.com/portexe
Facebook ➔ / portexe
Website ➔ www.portexe.com/
GAMING ➔ / portexe
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!
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.
This may be the most underrated youtube video I've seen in my life
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!
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.
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!
Great idea! Looking forward to code it , always learning something new!!
Bro is a react god. This is an interview question and now I can see why.
I was able to learn a lot from this video! Thank you!
Love the pace.
auto close method save my work day ! thx !
great video, thankss
Thank you ❤️
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!
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)
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
I love the color of the IDE, 🥰. What theme is that?
Great video! btw what's your VS code theme here? :)
Laserwave
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.
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!
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
am strangling with the same concept, but he mentioned you can use context api
you can use context api and wrap ref inside, or wrap all function in toast
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
okay i managed to implement this using Context to anyone wondering.
@@rodsmade do you have the source code and if you do can you share it with me?
@@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
Amazing video....Jst LOVE YOUR CONTENT !!! if i was gay i would smooch you for making me smart
Lol! Thanks. Appreciate you.
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.