Quando estamos falando de desenvolvimento web, há praticamente duas coisas que todo(a) programador(a) provavelmente já fez:

• Usar console.log() para debugar o código;
• Usar o alert() para exibir mensagens na tela.

Apesar de ambos funcionarem bem e nos ajudarem a desenvolver nossos sistemas, são totalmente inadequados para sistemas em produção. É por esse motivo que neste artigo, quero te apresentar o SweetAlert2, uma biblioteca JavaScript que nos ajuda na criação de alertas que sejam bonitos, responsivos e customizados. Tudo isso sem nenhuma outra dependência.

Versão em vídeo

Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos assistindo o vídeo abaixo:

Conheça o SweetAlert2

O SweetAlert2 é uma biblioteca JavaScript que nos auxilia na criação de alertas em nossas aplicações web. O projeto é de código aberto e está disponível no GitHub sob a licença MIT. Atualmente está na versão 7.12.15. Seu sucesso é tanto que já ultrapassou as 5 mil estrelas (quase alcançando 6 mil), 700 forks e 279 releases.

E o melhor de tudo é que ele é compatível com todos os navegadores atuais:

Instalação do SweetAlert2

A utilização da biblioteca é muito simples. Primeiramente, é necessário importá-lo para o seu projeto. É possível utilizar o npm:

npm install --save sweetalert2

Também é possível baixá-lo importá-lo para dentro do projeto ou utilizar um CDN:

<script src="sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">

Criando alertas magníficos

Uma vez importado, utilizamos o método swal para criar os alertas. O alerta mais simples é criado apenas passando como parâmetro a mensagem que desejamos exibir, como no exemplo a seguir, onde apenas exibimos a mensagem “Olá mundo!”:

See the Pen SweetAlert2 – Exemplo 1 by Diego Martins de Pinho (@DiegoPinho) on CodePen.

Para tornar as coisas mais interessantes, podemos utilizar alguns dos alertas padrões, como no exemplo abaixo, onde exibimos uma mensagem de erro e de sucesso, apenas especificando o seu tipo (bem semelhante ao que temos no bootstrap) na chamada do método:

See the Pen SweetAlert2 – Exemplo 2 by Diego Martins de Pinho (@DiegoPinho) on CodePen.

Mas o SweetAlert2 é capaz de muito mais. No exemplo abaixo criamos um alerta com várias configurações, como o título, texto, tipo, se deve mostrar os botões de confirmação, de cancelamento; e o que fazer se o usuário clicar em cada um deles:

See the Pen SweetAlert2 – Exemplo 3 by Diego Martins de Pinho (@DiegoPinho) on CodePen.

Também conseguimos criar alertas bem complexos como este abaixo, onde temos várias perguntas que devem ser respondidas em sequência. Para este exemplo, utilizamos mais alguns métodos e configurações, como é o caso do método queue, setDefaults e resetDefaults. Os utilizamos para definir a ordem das perguntas, configurar o visual delas e resetar o visual para o padrão, respectivamente.

See the Pen SweetAlert2 – Exemplo 4 by Diego Martins de Pinho (@DiegoPinho) on CodePen.

Bem bacana, não é mesmo? Eu poderia continuar mostrando diversos exemplos do que a biblioteca é capaz, mas no próprio site oficial há uma série de outros exemplos, tais como alertas com:

• Requisições AJAX
• Layout customizado (fundo, imagem, cores, etc)
• Posicionamento diferente (repare que por padrão ele coloca sempre no meio, independente do tamanho do seu device!)
• Fechamento automático (auto close timer)
• E muito mais!

Todas as demais configurações possíveis, tipos de input, métodos, eventos e afins estão disponíveis no site também.

Indo além com o SweetAlert2

Por mais bacana que o projeto seja, muitos(as) desenvolvedores(as) podem se incomodar com o fato de que ele é JavaScript puro. É por esse motivo que a comunidade se uniu para suportar o projeto dentro de outras tecnologias, como o Angular, React e o Vue.

Referências

• https://github.com/sweetalert2/sweetalert2