SweetAlert2 (Advance version of SweetAlert)
Last Updated :
28 Nov, 2023
Sweet Alert is used to make an alert box more attractive and easier to design. 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()).
Prerequisite:
Syntax:
function SweetAlert2() {
const fireAlert = () => {
Swal.fire({
...
}
).then((result) => {
...
})
}
}
Steps to Create the React Application And Installing Module:
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
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sweetalert2": "^11.10.1",
"web-vitals": "^2.1.4",
}
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) => {
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' }}>
GeeksforGeeks
</h1>
<h3>SweetAlert2 in React</h3>
<SweetAlert2 />
</div>
);
}
|
Step to run the application: Enter the following command to run the application.
npm start
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) => {
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' }}>
GeeksforGeeks
</h1>
<h3>SweetAlert2 in React</h3>
<SweetAlert2 />
</div>
);
}
|
Step to run the application: Enter the following command to run the application.
npm start
Output:
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...