Alertas bonitos, responsivos e customizados com o SweetAlert2
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 web, elas são ferramentas inadequadas para usarmos como forma de se comunicar com os usuários.
SweetAlert2
É por esse motivo que 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! Eu tenho quase certeza que você já deve ter visto a janelinha dele em algum site por aí mesmo sem saber que era gerada por essa biblioteca 👀
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:
Alertas bonitos e responsivos com o SweetAlert 2
—
SweetAlert2 – Uso simples
O seu uso é super simples. Primeiramente, é necessário importá-lo para o seu projeto:
npm install sweetalert2 # npm
# ou via cdn
<script src="<https://cdn.jsdelivr.net/npm/sweetalert2@11>"></script>
Uma vez importado, utilizamos o objeto Swal para disparar 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!”. Como neste exemplo aqui:
<button>Olá mundo!</button>
const button = document.getElementsByTagName("button")[0];
button.addEventListener("click", () => {
Swal.fire("Hello World!");
})
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:
<button id="success">Sucesso</button>
<button id="error">Erro</button>
const successBtn = document.getElementById("success");
const errorBtn = document.getElementById("error");
successBtn.addEventListener("click", () => {
Swal.fire("Boa!", "Deu tudo certo!", "success");
});
errorBtn.addEventListener("click", () => {
Swal.fire("Oh no...", "Algo deu errado!", "error");
});
Outras possibilidades
O Sweet Alert 2 é capaz de muito mais. No exemplo a seguir, criamos um alerta com diversas configurações, incluindo título, texto, tipo, opções de exibição para botões de confirmação e cancelamento, além de ações personalizadas para cada resposta do usuário:
<button>Exibir mensagem</button>
const button = document.getElementsByTagName("button")[0];
button.addEventListener("click", () => {
Swal.fire({
title: "Você está certo disso?",
text: "Esta pergunta vale um milhão de reais!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Sim, tenho certeza!",
cancelButtonText: "Melhor eu parar..."
}).then((result) => {
if (result.value) {
Swal.fire(
"Parabéns!",
"Você acertou e ganhou um milhão de reais!",
"success"
)
}
})
});
Bem bacana, né? E a verdade é que as possibilidades são infinitas. Todos estes exemplos e muito mais podem ser encontrados diretamente no site da ferramenta. E sabe o melhor de tudo? A biblioteca tem integração com as principais bibliotecas de front-end do mercado! Ou seja, o React, Angular e Vue!
Só pra te dar um exemplo, vamos criar rapidamente um projeto com o Vite e usar a biblioteca lá.
npm create vite@latest
npm install --save sweetalert2 sweetalert2-react-content
Já podemos adicionar no componente!
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
function handleMessage() {
const MySwal = withReactContent(Swal);
MySwal.fire({
title: "The Internet?",
text: "That thing is still around?",
icon: "question"
});
}
return (
<>
<div>
<a href="<https://vitejs.dev>" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="<https://react.dev>" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={handleMessage}>
aperta ai!
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
Conclusão
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.
LEIA TAMBÉM
De 0 a 10, o quanto você recomendaria este artigo para um amigo?