David Diaz Blog

David Diaz Blog

Create Better Notifications For Your Web

Create Better Notifications For Your Web

Subscribe to my newsletter and never miss my upcoming articles

If you have ever done web development, I'm quite sure that you have encountered a situation where you need to alert the user or ask for a response to a certain event, and in that case, you have probably used alert() to do that. But let's be real, it just looks unprofessional and it's style probably won't fit with the rest of your web.

image.png

There are some tricks to add some style to the 'alert' (like creating an HTML element and mimicking the alert() functionality), but there are is a way to make it so simple yet so good and pretty, that you will use it for every project from now on.

Sweet Alert Logo

SweetAlert2 is a fantastic library that gives us a nice and clean alternative when it comes to displaying messages to our users.

image.png

Both installing and using it is really easy, you can use npm or jsdelivr CDN, just follow the steps

And the best part is that we can use it on React, Vue, Angular, and plain HTML and JS.

This is an example, using only HTML and Javascript.

Easy right? Well with React is not harder, this is a code example:

carbon (4).png

And here it is with Vue:

carbon (5).png

As you can see, the library is really versatile, as there are a lot of customizable alerts to choose from, and we can even rely on it when it comes to certain logic like removing a file or not.

Also, you can install themes in case you don't like the preinstalled one.

And that's it! Hope this library can help you with your future projects!

#javascript
 
Share this