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.

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.

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

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:

And here it is with Vue:

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!

--

--

--

Learning everything!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Basics(With Hooks)

JavaScript Data Structures: Trees (pt. 5)

Writer of the Week: Arpit Falcon

Neo3 Preview2 Change-log

Redux in a Nutshell

Summarizing data flow of Redux

React Native — An open source framework for building native applications using React

thinking.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Diaz

David Diaz

Learning everything!

More from Medium

Cloning Zoomcar Website

How to SEO?

Design to CSS: How to adjust position while converting FIGMA & SKETCH

What are the top Web Development Technologies and Frameworks for 2022?