DEV Community

Cover image for Create Better Notifications For Your Web
David Díaz
David Díaz

Posted on

Create Better Notifications For Your Web

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!

Top comments (4)

Collapse
 
geobrodas profile image
Georgey

Great article wanted one of these!✌🏼

Collapse
 
dd8888 profile image
David Díaz

Thank you! Glad you find it useful 😄

Collapse
 
vinthefantastic1 profile image
vinthefantastic1

This looks great. Thanks for the write up!

Collapse
 
dd8888 profile image
David Díaz

Thank you for reading it!