EN
React - sweetalert example
3 points
In this article, we would like to show you how to create SweetAlert - a customizable replacement for JavaScript's popup boxes.
The first step is to install sweetalert2 package using npm:
xxxxxxxxxx1
$ npm install sweetalert2Or grab from CDN:
xxxxxxxxxx1
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>Quick solution:
xxxxxxxxxx1
import Swal from 'sweetalert2'2
3
Swal.fire('Alert text')4
5
// or an example from the picture above6
Swal.fire( 'Good job!','You clicked the button','success');Below an example with different types of alerts:
- success alert,
- question alert,
- and alert with a custom image.
Note:
SweetAlert2includes many more advanced options which you can check out by going here.
xxxxxxxxxx1
import React from 'react'2
import Swal from 'sweetalert2'3
4
const successAlert = () => {5
Swal.fire({ 6
title: 'Good job!', 7
text: 'You clicked the button.',8
icon: 'success'9
}); 10
}11
12
const questionAlert = () => {13
Swal.fire({ 14
title: 'Do you have a problem to solve?!', 15
text: 'Ask us on dirask',16
icon: 'question'17
}); 18
}19
20
const customImageAlert = () => {21
Swal.fire({22
text: "your custom image",23
imageUrl: 'https://i.ibb.co/LktzszD/dirask.png'24
});25
}26
27
const App = () => {28
return (29
<div>30
<button onClick={successAlert}>Success Alert</button>31
<button onClick={questionAlert}>Question Alert</button>32
<button onClick={customImageAlert}>Custom image Alert</button>33
</div>34
);35
}36
37
export default App;Online runnable example:
