How to show notifications in web application | by Samuel | October, 2022

A brief guide to this useful functionality

Unsplash. Photo by Volodymyr Hryshchenko on

Over the past month, I worked on my side project, a web application that allows you to encrypt and decrypt text messages (DoCrypt.org). It is still a work in progress, but I have already implemented some features that I want to share. I think this is an interesting project, and I want to dedicate a few posts to it. I’d like to focus on a feature I’ve implemented recently: Notifications.

I want to visually confirm the success of some operations. Specifically, “copying to device clipboard” of encrypted text. This is a feature I have implemented so that users can copy the ciphertext to an external application, such as a text message. For this reason, I decided to implement a notification confirming the copy to the device clipboard.

Visually, this is the result I want to achieve:

As you can see, Notifications is a small bar that appears at the top right. The bar is green and contains a text message. The bar appears for a short time and then disappears. The interesting thing is that I can use the same method to show different notifications of different colors and different messages.

To solve this problem, I used a Svelte component. The idea behind this is not mine. i was inspired by @kevmodrome Answer I customized everything according to my need.

I need two things: an HTML element to use on the screen to show notifications and something that keeps track of notifications and their lifecycle. Let me start with this aspect. And to solve this I use a store.

i make Notification.ts Let’s start by setting up a file and some interfaces and creating a simple store:

As you can see, I have made a Msg Interface that represents a notification. a type of notification that can be default, danger, warning, info either success, The type of notification determines the color of the bar. The message is the text that is shown in the bar. Lastly, the timeout is the time the notification appears. If not specified, the default is 3000 milliseconds.

For each notification, I specify an ID; I need a unique identifier to interact with the notification later. I can’t use a counter based on the length of the array because I can cancel the notification, and then the counter will not be valid. For this reason, I use idGenerator() Works to generate Unique ID.

So, I need a method to add notifications to the store:

i use shop update() Method to add a new notification to the array. update() The method accepts a function that receives the current state of the store and returns the updated state. In this case, I add a new notification to the array.

I am interested in passing the ID explicitly as there may be cases in which I am interested in accessing the notification from outside the component. If I choose not to pass the ID, I generate it internally.

Now I need a method to remove notification from store:

I use the update() method, combined with filter() Method to remove notification from array.

To manage the disappearing notifications, I need a timer or something similar. I use the SetTimeout() method:

All in all, I get the whole Notification.ts file as shown below:

After fixing the store part, I proceed component Part.

i make Notification.svelte Start importing the file and store with this code:

To access store values, I can use reactive $store syntax. Also, to show all the values ​​contained in the store, I use {#each...},

As you can see, I use each Method to iterate over all store values. For each value, I create a div with the notification text.

The component is complete, but I’m interested in adding some style to make it juicier.

This way, I show notifications one on top of the other in the top right of the screen.

But how do I show the notifications in a different color depending on the type? To do this, I add a class to it toast Div based on an object to use as notification type and color reference:

I can make it more beautiful by adding an animation to highlight the appearance and disappearance of notifications. To do this, I use svelte/transition and svelte/animate:

Combining all this, I finally get Notification.svelte Component:

All that is left now is to use it in our app.

To add component to pages, I need to import it App.svelte file. Here’s how to do it:

I need to import it only once on the main page of the app. This way, I can show notification starting from any app page.

For example, to show a notification when I have copied the ciphertext, I add the following code to the component:

Or, if I want to show a different color notification, I just need to change type of message:

Well, I would say that’s all for now. If you want to see the full code, you can find it on GitHub. The application is available at docrypt.org.

Thanks for reading! Stay tuned for more.

Leave a Comment