They Finally Released This Toast Library
Вставка
- Опубліковано 19 сер 2024
- Toast notifications are little messages that pop up for any success, error, or loading events. Their only purpose is to let users know what is currently happening in your app. This one might just be my new favorite.
Sonner 1.0 Release: sonner.emilkow...
-- my links
Discord: / discord
GitHub: github.com/jos...
I love how much effort you put in, all for just a Toast library. Keep it up.
😂
Hey josh can you please make video on multi tenancy?. How to implement it with next js 13. Please I'm waiting it for so longgg.
Yes please
👍
Yessss
Yeah, with postgresql
What is multi tenancy
code animation at 3:22 is really nice. good stuff
Thanks for noticing, really like the style too
dude you literally rock. You tell me what's new and poppin in the npm world and it only makes my life easier when developing
00:04 Sonor 1.0 is a new tool for easily creating toast notifications
00:40 React Hot Toast and Shad CN's built-in toast offer the best of both worlds.
01:18 React Toastify does not match the style of the UI library
01:53 The toast API in the UI library I prefer has a different and more customizable structure compared to React Hot Toast.
02:27 The API is similar to React Hot Toast.
03:03 Toasts are rendered based on a state that is mounted to true.
03:38 React Query is a library that works well with toast notifications.
04:14 React Query and TOS Notification Library Integration
LOL, I just used it today unknowingly that it was actually new, but yeah it is a really nice library to work with, easy to make, and style.
As usual very clean thoughts about a precise subject, thanks man for your good work !
Josh only reviews German-named packages by this point
@@ChichaGadhow is it islamic lmao
Dude I love this lib !
Great video!
Having toast notifications managed so elegantly with one library is an easy win right there.
I wish Angular had the same kind of UI library support that React has.
Love the fact that it has a headless option but keeps the animation and expand functionality - something that always made hot toast very hard to customize
Nice overview of React Toast Notification Libraries, in particular, sonner 1.0. Thanks, Josh
{2025-06-07}
This was really helpful man, thanks a lot.
FYI, onSuccess and onError is going to be deprecated in react-query future versions
Amazing how many people don't seem to realize shadcn is just tw styled radix, or talk about it like is a component library.
Josh, please do a headless Shopify/Bigcommerce full project tutorial with auth, payment and deployment. Currently there is no in-depth tutorial for this anywhere on youtube.
Thanks 😀
The biggest thing sonner has over shad cn is the fact that you can have multiple toasts and that when you hover they read out like that, other than thst no reason to use it over shads as the shads one is by fefault linked to your color scheme and can also take a description besides tbe title
Does it do anything to make sure the toasts disapear when you navigate to a new screen? I usually wrap react-tostify into my own toast solution. It consists of a ToastProvider component inside witch one can render toasts using "const toast = useToast(); toast.error('Test!');" The trick is that all toasts that got spawned inside a ToastProvider automaticaly get closed when that provider is unmounted. This way i can make sure that every screen of the aplication uses a different toast provider and i never have to think about manualy closing toasts again.
Loving how easy is to use it
Also we can make this synergy between axios/ky and toats library.
Thanks Josh, will give a try soon
When I used this sooner library, the toast displays along with it's Id. How do I work around that??
Another amazing video, Josh. Congratulations!! Do you have a toast library recomendation for React Native?
thanks Josh for the big efforts i just wonder if i could use NextJs as a Microservices and Microfronts in the same time as i could build a service in one project with its database and then start a new service and connect them together with event-driven architecture for example is it possible.
Sounds cool gonna try this!
Someone know how can we make animation code like this video in 3:21 or 3:31 ?
Thanks in advance for answer ;) and great video like everytime !
And the better toast UI is toastify for me, i have promise toast and it's very easy to use !
I think is Snappify!
Lol I just got done customizing my Shadcn toast component. Let me check Sonner out.
Hi, I want to learn more about how to create components and I love the way you did it, could you teach me or make a video on how to do it? This way you can render using a function I liked
Notistack doesn't get a mention?
Mr Josh we need the nextjs shopify full tutorial
This is really awesome
Great video! Do you know if you can use custom styling with tailwind classes? As of right now I think you can only specify hex color codes under style for for example the background color but since I am using a light and dark mode, I configured a specific color for it in my tailwind.config named bg-background-theme but trying to apply this color doesnt work, at least for me
Thanks for sharing!
this for vue would be epic
Word of warning: onSuccess and onError API is being depreciated
It already deprecated in the latest version
In starting I was appreciating shadcn/ui but I think this library misses a lot of components. As i use this library for building one of my company projects and It took way more efforts than i thought off. It's s not mature yet, misses lot of components i.e , Select with search and clear functionality there is command instead bit it has fix size for selecting i.e, 340px then I have to manually add events for that as per screen size, Year picker are missing in Date picker component . It's quite completed to implement searching, sorting & filters as it's use raw tanstack table and there is lot more which i can't even write. But it's good for building small projects and learning purpose. I won't recommend this library for building organisation project you will run into trouble due to projects requirements. 😊😊
Have you ever yried out Mantine UI? Would be great if you did a video on it.
Can we use sonner in Next js 13 app directory app? I faced some errors when trying to using it
Hi josh, do you know how to implement page transition in nextjs 13 app router? I've been searching but what I found mostly makes Layout into a client component ("use client").
Can you create a video tutorial for hoting next.js 13 on aws with every reneder stratigy efficently.
oh, i did'nt about on error stuff of react-query. Holy shit, i always handle the errors in .catch()
Gotta give it a try.
It’s kinda buggy unfortunately.
thank you
Can i use them in html code only?
This is good but unless it supports promise toasts it doesn't make much sense to change from your existing toast library
Does useSWR also has this kind of error as you showed for react-query?
Is there a similar library for Vue.js?
Maybe I'm too old, but toast library is definitely beyond the line I draw for unnecessary dependencies. It's so simple to write one custom for your project. I don't think basic one is more than 20 lines of code.
It starts getting more complicated once you get to the stacking part and making them all the same height, it does involve a tad more logic
100% with you on this. But it's also given me the idea to publish a fizz-buzz library to make a similar point in interviews, so there's that :)
Basic one does basic things. There are some not so edge cases to solve while doing toast notifications and it's definitely not 20 lines of code when you count logic and styling. I'm not saying it's hard to do, but why bother when someone else invested a lot of time doing that already?
@@rand0mtv660, well, for standard reasons some avoid dependencies inflation. Optimizing code (most use basic features but install library with full features), easier maintenance (library breaking changes or EOL), learning (people dont know how to do basic stuff lately, or even how they work). Jist checked my toast code on the last project... typescript (tsx), tailwind, 4 styles, stacking, transitions... 100 lines of code, mostly tsx
Dude react hot toast is crazy light lol it makes NO sense to waste time building what has been built a billion times and tested.
Hi, Josh. Is it possible to implement this in a "server side" fasion? If I were to follow similar methods as your TRPC/Quill tutorial and I say have a route in the /api folder that creates a user during which an async request is sent to check if an email address already exists - what way would you send a custom validation message back to the client and display a toast? Would I need to throw a new trpc.TRPCError() or send back a custom error code and catch it on the client?
tRPC has the same onSuccess and onError callbacks as react query, those really are the ideal place for toasts
@@joshtriedcoding I downloaded your project and just discovered this. Many thanks for your help.
wow!
Can this be used with Vue js?
does it work in server components?
Bro can next u give Reference library chart and lottie files animation for use on library lottie-react
Aren't onError and onSuccess deprecated?
ok i am using it since shadcn added it
Whats the name of the sketching tool? 🤔
So easy to use🔥
Am trying out now now!
Is this available for Vue/Nuxt?
Thanks
Can you please make a clone video using Nextjs13.4, mongodb and JS instead of Ts, please, I want to shift from page to app router, but I use these technologies, and I can't find a better teacher ever and anywhere, so please make a clone video, like i want to use infinite scrolling and 'use client' and 'use server', but you use TS in your videos, so please make a clone like youtube or amazon, please
Meh, ever heard of notiflic
Does it also work with react native
No
cool
bro use alpine js pls
Wow 😮;
Now I need to refactor code 😊
I hate those toast notifications, they are so annoying. They're bad UX
tiny lib review, more like this one
Maybe I'm missing something here, but why are toasts such a big deal?
For my solidjs/react projects I just write my own; it's a few lines of css and two components. These libraries seem a bit overengineered imo
First
awesome-react-toast is also good
cool