Simply SnackBar (Toast Menu)

The snackbar or toast menu is a top-pick of UX people for instant notification for grabbing their users’ attention. We are so familiar with the snackbar because it is practiced on almost every website. Okay, let’s see what will be the big deal of it.

Photo by Simba Munemo on Unsplash

What’s it?

The snackbar is typically a popup kind of notification that is not easily ignored by the users. Probably you might have seen at the top or bottom of the sites saying

• the cookie change policy
• tour for fresh users to a website
• time exceeds alert
• accept to our new T&Cs
• fresh offers
• thank you messages in android apps, etc.,

Working

COOL!! Does that sound interesting? Read further to spill the beans. You can be writing any framework, but the simple logic is to

1. define a snackbar element S at the root-level which has its pros and cons
2. trigger snackbar if the element S is inactive
3. hide the element S after t seconds or play as per your business needs

You can find the working codepen.io. I have written a small piece of code that can be reused, customized, and triggered anywhere by the document.

A snippet to trigger snackbar:

function showSnackbar(element, timeout, type) {
 element.classList.add("show");
 if (type) {
  element.classList.add(type);
 }
 // After 5 seconds, remove the show class from element
 if (timeout) {
  snackbarTimeout = setTimeout(function () {
   element.classList.remove("show");
   clearTimeout(snackbarTimeout);
  }, timeout);
 }
}

A snippet to hide snackbar

function hideSnackbar(element) {
 element.classList.remove("show");
 element.classList.add("hide");
 clearTimeout(snackbarTimeout);
}

Pro-Tips

1. Define the snackbar element S above the router and utilize the same implementation for all the sub-pages
2. Design the snackbar element S and ensures it has freedom on the document
3. Engineer a snackbar element which should be customized highly

• to update the info texts
• you may need to implement either one, two, more, or no buttons with its functionalities
• to hide automatically after t seconds or needs any user actions
• able to freeze the page unless any action took about the snackbar, yay that’s too possible
• maybe position over any place on the document
• can be styled based upon the nature of notification (say critical, moderate, ignorable)
• queueing the snackbars, may be?

Cons

Sometimes, you may not need the snackbar to load for all the pages. So dissolve it to a sub-component and append it to the root/sub-element whenever needed.

I am in the mission of writing content for the budding developers. I am more likable to write about a simple solution for a problem that seems to be tough at first sight but actually, it’s not. If you have such any ideas or faced at your career inception, drop in the comment box.

Please write if you have any queries, ideas or anything to write about in the future.

Here we go with the crazy sign off (please read as you can watch in the youtube channels) Please, Like, Comment, Follow & Subscribe to my blog site!!!

Mind reading about my other blogs? How about reading Hide Scroll bar, but still scroll ?!