Build a Toast Notification Service purely in ReactJS and TailwindCSS

how do you make a tool service in pure react and Tailwind CSS from scratch all of that with full customizability let's go ahead and build this I have these buttons already set up with their respective handlers you can copy the Styles but it is completely optional we'll now Focus purely on our door service first we need a context so we can access the service anywhere in our app for ease of use I'll make a used toast hook it's just a wrapper for using the toast context finally export the context also next up we need the toast provider that will provide the actual functionality it will accept our app as children and wrap it with the contacts provider all boilerplate aside now the actual functionality we need to stay toward Old dose a container for them that will be placed on top of our app in the bottom right corner each toast will have an ID and the component that will be shown so that way you can display any component as a toast and have complete control over it wrap it with a relative div since we want a close button on the top right corner of each toast one last thing left is our toast helper functions to open a toast we need a component and time out after which it's closed I'll default it to 5 Seconds you can ask for the ID or generate your own to keep it simple I'm using date dot now add our new toes to the very last you may prefer it to go first and close it after the timeout so let's quickly make this close function also I'll require the ID of the toast and just filter out the tools with that ID and finally pass those helper functions to the provider to use the toast service you'll need to wrap your app component with this provider and that's it you can now use the door service anywhere inside your app with the use toast hook let's see it in action I'll quickly make an alert component for it let's try now I think I forgot to attach the close function to it it should work now let's add some more check the timeout also one thing we missed was returning the ID when we open a new toast it is crucial if we want to close the doors programmatically and that's it your own custom toast service in under 7 Minutes hit like if you found this helpful and subscribe for more content like this

Channel: Your Code Lab

Views: 5,311

Keywords: reactjs, tailwindcss, javascript, webdev, web development, coding, programming, react components

Id: WDjWJA78Oic

Length: 7min 13sec (433 seconds)

Published: Mon Apr 17 2023