Sweet Alert is used to make an alert box more attractive and easier to design. The sweet JS Provides easy methods to design and add a lot of functionality to the alert box of the website by just calling the function of sweet alert (in short SWAL()).
It is a beautiful replacement for JavaScript confirming the message! It will replace the ugly confirmation message with a beautiful customizable and fully functional modal.
SweetAlert 2 is advance of sweetAlert. SweetAlert2 supports HTML content as well while the former does not.
There is an independent dependency that needs to be installed to work with SweetAlert2.
Syntax:
function SweetAlert2() {
const fireAlert = () => {
Swal.fire({
...
}
).then((result) => {
...
})
}
}
Let’s build a react project and show the working of sweetAlert2
To build a react application follow the below steps:
Step 1: Create a react application using the following command
npx create-react-app foldername
Step 2: Once it is done change your directory to the newly created application using the following command
cd foldername
Step 3: Install Required Dependency
npm install sweetalert2
Step to run the application: Enter the following command to run the application.
npm start
Project Structure: The project should look like this:
Example 1: In this example, we will simply display sweetAlert2. On success, it will display a message, ‘Nice to meet you’ and on cancel it will display, ‘Cancelled’. Write the below code in App.js
Javascript
import React from 'react'import Swal from 'sweetalert2'import { useState } from 'react'function SweetAlert2() { const fireAlert = () => { Swal.fire({ title: 'I am Sweet Alert 2.', showConfirmButton: true, showCancelButton: true, confirmButtonText: "OK", cancelButtonText: "Cancel", icon: 'warning' } ).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { Swal.fire('Nice to meet you', '', 'success'); } else Swal.fire(' Cancelled', '', 'error') }) } return ( <div > <center> <button className="btn btn-primary" onClick={fireAlert}> Click me to see Sweet Alert 2 </button> </center> </div> )}export default function App() { return ( <div className="App"> <h1 style={{ color: 'green' }}> neveropen </h1> <h3>SweetAlert2 in React</h3> <SweetAlert2 /> </div> );} |
Output:
Example 2: In this example, we will display a counter. An Alert will be popUp which will ask to increment the value of the counter.
Javascript
import React from 'react'import Swal from 'sweetalert2'import { useState } from 'react'function SweetAlert2() { const [counter, setCounter] = useState(0); const fireAlert = () => { Swal.fire({ title: 'I am Sweet Alert 2.', html: ' < p > Can I increase counter?</p> ', showConfirmButton: true, showCancelButton: true, confirmButtonText: "Yes Increase", cancelButtonText: "Cancel", icon: 'warning' } ).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { setCounter(counter + 1) Swal.fire('Counter Value Increased', '', 'success'); } else Swal.fire(' Cancelled', '', 'error') })}return ( <div > <center> <br></br> <strong> Counter Value: </strong> <div style={{ padding: '2%', background: '#308D46', color: 'white', fontWeight: 'bold', borderRadius: '4%', display: 'inline-block' }}> {counter} </div> <br></br> <br></br> <button className="btn btn-primary" onClick={fireAlert}> Click me to see Sweet Alert 2 </button> </center> </div>)}export default function App() { return ( <div className="App"> <h1 style={{ color: 'green' }}> neveropen </h1> <h3>SweetAlert2 in React</h3> <SweetAlert2 /> </div> );} |
Output:
