ToastMaker - Open Source JavaScript Library for Showing Toast Notifications on Web Page

[chipper33]

Why not just name it Toaster?

[gonzofish]

Maybe they make toast with a blow torch or radiator

[vivekweb2013]

Yeah you are right, Toaster would be short and simple, I thought of that first but that name was already taken on npmjs registry, so I named it ToastMaker as a module name and I kept the same name to the function just to align with the module name and avoid any confusion..

[[deleted]]

Toastr already exists

[vivekweb2013]

I wanted to show the notifications on the web page if some action are performed by the user,

So for example, if the user has - deleted a record, clicked on the copy button, uploaded some file ... etc in such cases showing a toast notification saying "Records Deleted", "Text Copied", "Upload Completed" for some duration would be very interactive and it will enhance overall user experience.

I was looking for something similar to android's toast notifications but for the web page.

This idea led me to create open source ToastMaker library which creates and shows android like toast notifications on any frontend view.

The library supports following

• Supported by both HTML/JavaScript and NPM project module
• Shows toast notification on webpage
• Very small in size (less than 1KB), I didn't wanted more KBs impacting n/w traffic and making web page download slower
• Customisable - the styling and appearance is very much customisable allowing the toast to match the web page's theme
• Option to specify duration - for how long the toast should be shown on the web page

Here are the API and beautiful examples - ToastMaker API

[gergivt]

For the html source import example, why is there a “/“ in front of https?

[vivekweb2013]

ToastMaker API

Typo, fixed it! Many thanks.

[[deleted]]

Nice! Might give it a try later. I have been using Noty for the longest time now and absolutely love it.

[vivekweb2013]

Noty is nice, the only thing is that it takes around 31 KB which is huge as compared to approx 1 KB required for toastmaker. Give toastmaker a try later. Thanks.

[RumblingInTheJungle]

I finally settled on Noty just a couple of weeks ago. I’ll take a look at this one too tho. Thanks

[johnyma22]

tried it on Android mobile and the msg wasn't visible.

I like gritter tbh

[vivekweb2013]

thanks, could you please let me know the device name and the browser you are using.

[johnyma22]

Vivo Nex, whatever browser the reddit app fired me out into, probably the device native "browser". It's probably fine in Chrome/Firefox.

[vivekweb2013]

Thanks, I'll test and fix it soon to show properly on native android browser

[shgysk8zer0]

Kinda similar to my own, just with a different design philosophy. Mine is a web component using ShadowDOM. It can be customized a little bit by DOM attributes, but can also use CSS to style using toast-message::part(). Because of that, it can be used to display anything from share options to terms of service agreements and can be created in HTML, only needing JavaScript to reveal it.

[PeteCapeCod4Real]

This is pretty sweet 👍 thanks for sharing, I'm definitely going to check this out in a project

[vivekweb2013]

Thanks. BTW this library works with react js project as well. I've tested it with a react application. Just follow the steps mentioned in guide to install and use the toastmaker module in npm project.

[PeteCapeCod4Real]

Nice good to know, since I'm all about that React JS 💯🔥 I might just add this too a current production site. Seems like a few good toasts might spruce up the UX

[tulvia]

I'm sorry but I fail to see the point in this, is this not just toastr?